Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beizhedenglong/react-hooks-lib
A set of reusable React Hooks.
https://github.com/beizhedenglong/react-hooks-lib
hooks react react-hooks utils
Last synced: 10 days ago
JSON representation
A set of reusable React Hooks.
- Host: GitHub
- URL: https://github.com/beizhedenglong/react-hooks-lib
- Owner: beizhedenglong
- License: mit
- Created: 2018-10-26T05:49:52.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T08:14:17.000Z (over 3 years ago)
- Last Synced: 2024-09-19T11:51:00.933Z (about 2 months ago)
- Topics: hooks, react, react-hooks, utils
- Language: JavaScript
- Homepage: https://beizhedenglong.github.io/react-hooks-lib
- Size: 82.9 MB
- Stars: 545
- Watchers: 13
- Forks: 27
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-hooks-lib`
- awesome-react-hooks-cn - `react-hooks-lib`
- awesome-react-hooks - `react-hooks-lib`
- awesome-react-hooks - `react-hooks-lib`
- awesome-react-hooks - React Hooks Lib - A set of reusable React Hooks. (Packages)
- awesome-react-hooks - react-hooks-lib - A set of reusable React Hooks. (Extensions/Libraries)
README
# React Hooks Lib ·  [](https://travis-ci.org/beizhedenglong/react-hooks-lib) [](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 |
| -------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------- |
|
Lifecycles
| | |
| [`useDidMount`](#usedidmountf) | f | - |
| [`useWillUnmount`](#usewillunmountf) | f | - |
| [`useDidUpdate`](#usedidupdatef-options) | f, conditions | - |
| State
| | |
| [`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 } |
| Effect
| | |
| `useShallowEqualEffect` | f, deps | - |
| `useDeepEqualEffect` | f, deps | - |
| Network
| | |
| [`useFetch`](#useFetchInitialUrl-initialOptions-onMount) | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
| [`useOnlineStatus`](#useonlinestatus) | | |
| Feedback
| | |
| [`useHover`](#useHover) | - | { hovered, bind } |
| [`useActive`](#useActive) | - | { active, bind } |
| [`useFocus`](#useFocus) | - | { focused, bind } |
| [`useTouch`](#useTouch) | - | { touched, bind } |
| Data Entry
| | |
| [`useField`](#useFieldInitial) | initial | { value, set, reset, bind } |
| Async
| | |
| `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`: 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 (
{`count: ${count}`}
inc(1)}>+1
)
}
```
### `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 (
useMergeState
{`state: ${JSON.stringify(state)}`}
set(({ age }) => ({ age: age + 1 }))}>age+1
)
}
```
### `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 (
{count}
inc(1)}>+1
dec(1)}>-1
reset
)
}
```
### `useToggle(initial)`
```js
import { useToggle } from 'react-hooks-lib'
const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (
{String(on)}
toggle
reset
)
}
```
### `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 (
list:
{JSON.stringify(list)}
sort((x, y) => x - y)}>sort
filter(x => x >= 4)}> greater than or equal to 4
)
}
```
### `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 (
useFetch
{
setUrl(getUrl(value))
}}
>
search
{
loading
? Loading...
: ({`total_count: ${data.total_count}`})
}
)
}
```
### `useOnlineStatus()`
### `useHover()`
``` js
import { useHover } from 'react-hooks-lib'
const Hover = () => {
const { hovered, bind } = useHover()
return (
hovered:
{String(hovered)}
)
}
```
### `useActive()`
### `useFocus()`
### `useTouch()`
### `useField(initial)`
```js
import {useField} from 'react-hooks-lib'
const Input = () => {
const { value, bind } = useField('Type Here...')
return (
input text:
{value}
)
}
const Select = () => {
const { value, bind } = useField('apple')
return (
selected:
{value}
apple
orange
)
}
```