# react-hooks-lib

> A set of reusable [React Hooks](https://reactjs.org/docs/hooks-reference.html#usestate).

Latest version **0.6.0** (published 2021-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hooks-lib
pnpm add react-hooks-lib
yarn add react-hooks-lib
bun add react-hooks-lib
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2021-08-06 |
| First published | 2018-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 542 |
| Maintainers | beizhedenglong |
| Keywords | react-hooks, hooks, react, utils |

## Links

- npm: https://www.npmjs.com/package/react-hooks-lib
- Repository: https://github.com/beizhedenglong/react-hooks-lib
- Homepage: https://github.com/beizhedenglong/react-hooks-lib#readme
- Issues: https://github.com/beizhedenglong/react-hooks-lib/issues
- npm.io page: https://npm.io/package/react-hooks-lib

## Dependencies (2)

- [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.6.0 (latest) — 2021-08-06
- 0.5.0 — 2021-01-24
- 0.4.0 — 2021-01-09
- 0.3.0 — 2020-09-13
- 0.2.0 — 2020-05-26
- 0.1.5 — 2020-03-04
- 0.1.4 — 2020-03-04
- 0.1.3 — 2020-03-04
- 0.1.2 — 2020-03-04
- 0.1.1 — 2020-01-13
- 0.1.0 — 2019-10-21
- 0.0.20 — 2019-08-08
- 0.0.19 — 2019-07-14
- 0.0.18 — 2019-05-14
- 0.0.16 — 2019-01-24
- … 15 more at https://npm.io/package/react-hooks-lib/versions

## README

# React Hooks Lib · ![](https://img.shields.io/github/license/beizhedenglong/react-hooks-lib.svg) [![Build Status](https://travis-ci.org/beizhedenglong/react-hooks-lib.svg?branch=master)](https://travis-ci.org/beizhedenglong/react-hooks-lib) [![Coverage Status](https://coveralls.io/repos/github/beizhedenglong/react-hooks-lib/badge.svg?branch=master&service=github)](https://coveralls.io/github/beizhedenglong/react-hooks-lib?branch=master)

A set of reusable [React Hooks](https://reactjs.org/docs/hooks-reference.html#usestate).

>Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

## Installation
`npm i react-hooks-lib --save`

## Examples
Visit [storybook](https://beizhedenglong.github.io/react-hooks-lib)

## Hooks

| Name                                                     | Arguments                          | Returns                                                         |
| -------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------- |
| <h6>Lifecycles</h6>                                      |                                    |                                                                 |
| [`useDidMount`](#usedidmountf)                           | f                                  | -                                                               |
| [`useWillUnmount`](#usewillunmountf)                     | f                                  | -                                                               |
| [`useDidUpdate`](#usedidupdatef-options)                 | f, conditions                      | -                                                               |
| <h6>State</h6>                                           |                                    |                                                                 |
| [`createContextState`](#createContextStateInitial)       | initial                            | { ContextProvider, ContextConsumer,  set, useSelector, useSet } |
| [`createGlobalState`](#createGlobalStateInitial)         | initial                            | { GlobalProvider, GlobalConsumer, set, useSelector, useSet }    |
| [`useMergeState`](#usemergestateinitial)                 | initial                            | { state, set }                                                  |
| [`useNestedState`](#usenestedstate)                      | initial                            | { state, get, set }                                             |
| `useBind`                                                | Please visit storybook             | Please visit storybook                                          |
| `useNestedBind`                                          | Please visit storybook             | Please visit storybook                                          |
| [`useStateCallback`](#useStateCallbackInitial-f)         | initial, f                         | { state, set }                                                  |
| [`useUndo`](#useUndoInitial)                             | initial                            | { past, present, future, set, undo, redo }                      |
| [`useCounter`](#useCounterInitial)                       | initial                            | { count, set, reset, inc, dec }                                 |
| [`useToggle`](#useToggleInitial)                         | initial                            | { on, set, reset, toggle }                                      |
| [`useList`](#useListInitial)                             | initial                            | { list, set, reset, push, sort, filter }                        |
| [`useMap`](#useMapInitial)                               | initial                            | { values, set, reset, clear, get, has, del }                    |
| <h6>Effect</h6>                                          |                                    |                                                                 |
| `useShallowEqualEffect`                                  | f, deps                            | -                                                               |
| `useDeepEqualEffect`                                     | f, deps                            | -                                                               |
| <h6>Network</h6>                                         |                                    |                                                                 |
| [`useFetch`](#useFetchInitialUrl-initialOptions-onMount) | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData }    |
| [`useOnlineStatus`](#useonlinestatus)                    |                                    |                                                                 |
| <h6>Feedback</h6>                                        |                                    |                                                                 |
| [`useHover`](#useHover)                                  | -                                  | { hovered, bind }                                               |
| [`useActive`](#useActive)                                | -                                  | { active, bind }                                                |
| [`useFocus`](#useFocus)                                  | -                                  | { focused, bind }                                               |
| [`useTouch`](#useTouch)                                  | -                                  | { touched, bind }                                               |
| <h6>Data Entry</h6>                                      |                                    |                                                                 |
| [`useField`](#useFieldInitial)                           | initial                            | { value, set, reset, bind }                                     |
| <h6>Async</h6>                                           |                                    |                                                                 |
| `useAsync`                                               | f                                  | { f, loading }                                                  |


## API

### `useDidMount(f)`
Similar to `componentDidMount` in React class component. 
#### Arguments
- `f: () => void`: f is  called when component did mount.
```js
import { useDidMount } from 'react-hooks-lib'

const MyComponent = () => {
  useDidMount(() => {
    console.log('didMount')
  })
}
```

### `useWillUnmount(f)`
Close to the `componentWillUnmount` in React class component.
#### Arguments
- `f: () => void`: f is called when component will unmount.
```js
import { useWillUnmount } from 'react-hooks-lib'

const MyComponent = () => {
  useWillUnmount(() => {
    console.log('willUnmount')
  })
}
```

### `useDidUpdate(f, options?)`
Similar to `componentDidUpdate`, it only runs on updates.
#### Arguments
- `f: () => Function | void`: f is called on every updates. Like `useEffect`, f can return a clean-up function.
- `conditions?: Array<any>`: Optional array for conditionally firing an effect, same as the second argument passed to `useEffect`.
```js
import { useDidUpdate, useCounter } from 'react-hooks-lib'

const MyComponent = () => {
  const { count, inc } = useCounter(0)
  useDidUpdate(() => {
    console.log('DidUpdate')
  })
  return (
    <div>
      {`count: ${count}`}
      <button onClick={() => inc(1)}>+1</button>
    </div>
  )
}
```
### `createContextState(initial?)`

### `createGlobalState(initial?)`

### `useMergeState(initial?)`
#### Arguments
- `initial?: Object`: Initial state object, default is `{}`.
#### Returns
- `state: Object`: Current state object.
- `set: ((Object) => Object) | Object`: Like `setState` in React class component, merge the old and new state together.
```js
import { useMergeState } from 'react-hooks-lib'

const MergeState = () => {
  const { state, set } = useMergeState({ name: 'Victor', age: 1 })
  return (
    <div>
      <h3>useMergeState</h3>
      <div>
        {`state: ${JSON.stringify(state)}`}
        <button onClick={() => set(({ age }) => ({ age: age + 1 }))}>age+1</button>
      </div>
    </div>
  )
}
```
### `useNestedState`
#### Arguments
- `initial?`: Initial state, default is `undefined`.
#### Returns
- `state`: Current state.
- `get(pathString, defaultValue)`: Get value form state at a specific `pathString`. eg: `get("a.b.c")`/`get("" | undefined)`, if `pathString` is empty,it will return the state object.
- `set: (pathString, newValue | prevValue => newValue)`: Set value at a specific `pathString`. eg: `set("a.b.c", prev => prev + 1)`/`set("" | undefined, {})`. if `pathString` is empty,it will set the entire state object.

### `useStateCallback(initial, f?)`

### `useUndo(initial)`

### `useCounter(initial)`
```js
import { useCounter } from 'react-hooks-lib'

const Counter = () => {
  const {
    count, inc, dec, reset,
  } = useCounter(1)
  return (
    <div>
      {count}
      <button onClick={() => inc(1)}>+1</button>
      <button onClick={() => dec(1)}>-1</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

```
### `useToggle(initial)`
```js
import { useToggle } from 'react-hooks-lib'

const Toggle = () => {
  const { on, toggle, reset } = useToggle(false)
  return (
    <div>
      {String(on)}
      <button onClick={toggle}>toggle</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}
```

### `useList(initial)`
```js
import { useList } from 'react-hooks-lib'
const List = () => {
  const { list, sort, filter } = useList([1, 4, 2, 3, 4, 2, 6, 8, 3, 4])
  return (
    <div>
      list:
      {JSON.stringify(list)}
      <button onClick={() => sort((x, y) => x - y)}>sort</button>
      <button onClick={() => filter(x => x >= 4)}> greater than or equal to 4</button>
    </div>
  )
}
```

### `useMap(initial)`

### `useFetch(initialUrl, initialOptions?, onMount?)`
```js
import { useField, useFetch } from 'react-hooks-lib'

const Fetch = () => {
  const getUrl = text => `https://api.github.com/search/repositories?q=${text}`
  const { value, bind } = useField('react')
  const { data, loading, setUrl } = useFetch(getUrl('react'))
  return (
    <div>
      <h3>useFetch</h3>
      <input type="text" value={value} {...bind} />
      <button onClick={() => {
        setUrl(getUrl(value))
      }}
      >
        search
      </button>
      {
        loading
          ? <div>Loading...</div>
          : (<span>{`total_count: ${data.total_count}`}</span>)
      }
    </div>
  )
}
```

### `useOnlineStatus()`

### `useHover()`

``` js
import { useHover } from 'react-hooks-lib'

const Hover = () => {
  const { hovered, bind } = useHover()
  return (
    <div>
      <div {...bind}>
        hovered:
        {String(hovered)}
      </div>
    </div>
  )
}
```

### `useActive()`

### `useFocus()`

### `useTouch()`

### `useField(initial)`
```js
  import {useField} from 'react-hooks-lib'

  const Input = () => {
    const { value, bind } = useField('Type Here...')

    return (
      <div>
        input text:
        {value}
        <input type="text" {...bind} />
      </div>
    )
  }

  const Select = () => {
    const { value, bind } = useField('apple')
    return (
      <div>
        selected:
        {value}
        <select {...bind}>
          <option value="apple">apple</option>
          <option value="orange">orange</option>
        </select>
      </div>
    )
  }
```

---
_Source: https://npm.io/package/react-hooks-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._