open-index/open-npm huggingface dataset:
npm package: @gdo-bzh/theme
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/theme)
Author: gdo
Latest version: 1.0.0-rc.6

![version](https://img.shields.io/npm/v/@gdo-bzh/theme)

# theme

[![NPM](https://img.shields.io/npm/v/theme.svg)](https://www.npmjs.com/package/theme) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

The theme object stores design system style values and scales. The objects shape is based on the [System UI Theme Specification](https://system-ui.com/theme/).

## Install

```bash
yarn add @gdo-bzh/theme polished react styled-components @xstyled/styled-components lodash.merge
# or
npm i @gdo-bzh/theme polished react styled-components @xstyled/styled-components lodash.merge -S
```

## Usage

```tsx
import React from 'react'
import {ThemeProvider} from '@gdo-bzh/theme

const MyApp = () => <div>My themeable application!</div>
const Example = () => <ThemeProvider><MyApp /></ThemeProvider>
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/use-fetch
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/use-fetch)
Author: gdo
Latest version: 1.0.0-rc.4

![version](https://img.shields.io/npm/v/@gdo-bzh/use-fetch)

# use-fetch

[![NPM](https://img.shields.io/npm/v/use-fetch.svg)](https://www.npmjs.com/package/use-fetch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

this hook is charged to fetch data using the fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it. The following walkthrough is nonetheless funny.

## Install

```bash
yarn add @gdo-bzh/use-fetch react
```

## Usage

```tsx
import React from 'react'

type User = {
  name: string
  email: string
  avatar: string
}

const Example = () => {
  const {
    state: { isLoading, isError, isAborted, error, data },
    setInput,
    abort
  } = useFetch<User[]>('/getUsers', {}, [])
}
```

## Types

```tsx
type State<T> = {
  isLoading: boolean
  isError: boolean
  isAborted: boolean
  error?: Error
  data: T
}

/**
 * hook type
 */
export type UseFetch = {
  <T>(input: RequestInfo, init: RequestInit, initialData: T): {
    state: State<T>
    setInput: React.Dispatch<React.SetStateAction<RequestInfo>>
    abort: () => boolean
  }
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/use-iterator
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/use-iterator)
Author: gdo
Latest version: 1.0.0-rc.5

![version](https://img.shields.io/npm/v/@gdo-bzh/use-iterator)

# use-iterator

[![NPM](https://img.shields.io/npm/v/use-iterator.svg)](https://www.npmjs.com/package/use-iterator) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

iterates over a collection

## Install

```bash
yarn add @gdo-bzh/use-iterator react @gdo-bzh/use-range-iterator
# or
npm i @gdo-bzh/use-iterator react @gdo-bzh/use-range-iterator -S
```

## Usage

```tsx
import React from 'react'

const Example = () => {
  const { item, next, previous, hasNext, hasPrevious } = useRangeIterator({ items:[{...}, {...}] })
}
```

## Types

```tsx
export type State<T> = {
  /**
   * start value
   */
  items: T[]
  /**
   * the number of values to navigate at a time
   */
  step: number
  /**
   * true will make navigation cycling
   */
  loop: boolean
}

export type UseIterator = {
  <T>(initialState: Partial<Omit<State<T>, 'value' | 'items'>> & Pick<State<T>, 'items'>): {
    loop: State<T>['loop']
    step: State<T>['step']
    item: T
    hasNext: boolean
    /**
     * returns true if the iteration has more Element
     */
    hasPrevious: boolean
    /**
     * iterates to the next element
     */
    next: () => void
    /**
     * iterates to the previous element
     */
    previous: () => void
  }
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/use-range-iterator
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/use-range-iterator)
Author: gdo
Latest version: 1.0.0-rc.5

![version](https://img.shields.io/npm/v/@gdo-bzh/use-range-iterator)

# use-range-iterator

[![NPM](https://img.shields.io/npm/v/use-range-iterator.svg)](https://www.npmjs.com/package/use-range-iterator) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

iterates from start value to end value

## Install

```bash
yarn add @gdo-bzh/use-range-iterator react
# or
npm i @gdo-bzh/use-range-iterator react
```

## Usage

```tsx
import React from 'react'

const Example = () => {
  const { value, next, previous } = useRangeIterator({ start: 0, end: 10 })

  ...
}
```

## Types

```tsx
export type State = {
  /**
   * start value
   */
  start: number
  /**
   * end value
   */
  end: number
  /**
   * current value
   */
  value: number
  /**
   * the number of values to navigate at a time
   */
  step: number
  /**
   * true will make navigation cycling
   */
  loop: boolean
}

export enum ActionType {
  /**
   * iterates to previous value
   */
  PREVIOUS,
  /**
   * iterates to next value
   */
  NEXT
}

export type Action = {
  type: ActionType.PREVIOUS | ActionType.NEXT
  payload?: any
}

export type RangeIteratorReducer = React.Reducer<State, Action>

/**
 * hook type
 */
export type UseRangeIterator = {
  (initialState: Partial<Omit<State, 'value'>>, reducer?: RangeIteratorReducer): {
    loop: State['loop']
    step: State['step']
    value: State['value']
    /**
     * returns true if the iteration has more values
     */
    hasNext: boolean
    /**
     * returns true if the iteration has more values
     */
    hasPrevious: boolean
    /**
     * iterates to the next value
     */
    next: () => void
    /**
     * iterates to the previous value
     */
    previous: () => void
  }
  defaultReducer: RangeIteratorReducer
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/use-reminders-state
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/use-reminders-state)
Author: gdo
Latest version: 1.0.0-rc.4

![version](https://img.shields.io/npm/v/@gdo-bzh/use-reminders-state)

# use-reminders-state

> Create reminders and set alerts based on time.
>
> You can:
>
> - set a due date
> - flag a reminder
> - complete a reminder
> - set a level of priority ( Low | Medium | High)

[![NPM](https://img.shields.io/npm/v/use-reminders-state.svg)](https://www.npmjs.com/package/use-reminders-state) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @gdo-bzh/use-reminders-state react lodash.pickby use-deep-compare-effect
# or
npm i @gdo-bzh/use-reminders-state react lodash.pickby use-deep-compare-effect -S
```

###

## Usage

```tsx
import React from 'react'

import { useRemindersState } from 'use-reminders-state'

const Example = () => {
  const {
    reminders /* reminder list */,
    alarms /* list of scheduled alarms */,
    addReminder /* add a reminder */,
    deleteReminder /* delete a reminder */,
    toggleCompleteReminder /* toggle complete status */,
    toggleFlagReminder /* toggle flag status */,
    updateReminder /* update reminder */,
    setReminderPriority /* set level of priority */
  } = useRemindersState()

  return <div>...</div>
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/use-toggle-button-group-state
Description: React hook managing the state of a toggle button group
Author: gdo-bzh
Latest version: 2.0.14

![version](https://img.shields.io/npm/v/@gdo-bzh/use-toggle-button-group-state)

# use-toggle-button-group-state

>

[![NPM](https://img.shields.io/npm/v/use-toggle-button-group-state.svg)](https://www.npmjs.com/package/use-toggle-button-group-state) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

React hook managing the state of a toggle button group. A toggle group is used to group related options under a common container. Only one option in a group of buttons can be selected and active at a time. Selecting one option deselects any other. It strictly acts like a radio-button group. the toggle group state makes it clear which button is active.

## Install

```bash
yarn add @gdo-bzh/use-toggle-button-group-state react
# or
npm install --save @gdo-bzh/use-toggle-button-group-state react
```

## Usage

```tsx
import React from 'react'

import { UseToggleButtonState } from '@gdo-bzh/use-toggle-button-group-state'

const Example = () => {
  const { handleSelect, currentSelectedId } = useToggleButtonGroupState({
    selectedId: 'first'
  })

  const onButtonClick = event => console.log(event.currentTarget.name)

  return (
    <div>
      <button
        type="button"
        name="first"
        className={currentSelectedId === 'first' ? 'button button--selected' : 'button'}
        onClick={handleSelect(onButtonClick)}
      >
        First
      </button>
      <button
        type="button"
        name="second"
        className={currentSelectedId === 'second' ? 'button button--selected' : 'button'}
        onClick={handleSelect(onButtonClick)}
      >
        Second
      </button>
    </div>
  )
}
```

## Types

```tsx
type CallbackFunctionVariadic = (...args: any[]) => void

type State = {
  /**
   * default selected button id. If not set, no element is selected by default.
   */
  selectedId?: string
  /**
   * the key attribute used to uniquely resolve each toggle-button. The default value is 'name'
   */
  attributeId?: string
}

type ClickHandler = (callback: CallbackFunctionVariadic) => React.ReactEventHandler<HTMLElement>

type UseToggleButtonGroupState = (
  initialState?: State
) => {
  /**
   * selection handler. It accepts as single parameter, the specific action attached to the button click event.
   */
  handleSelect: ClickHandler
  /**
   * current selected button id
   */
  currentSelectedId: State['selectedId']
  /**
   * reset selection
   */
  reset: () => void
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)