React Hooks Lib ·   

A set of reusable React Hooks.

>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

Hooks

| Name | Arguments | Returns |
| -------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------- |
|

Lifecycles

| | |
| useDidMount | f | - |
| useWillUnmount | f | - |
| useDidUpdate | f, conditions | - |
|

State

| | |
| createContextState | initial | { ContextProvider, ContextConsumer, set, useSelector, useSet } |
| createGlobalState | initial | { GlobalProvider, GlobalConsumer, set, useSelector, useSet } |
| useMergeState | initial | { state, set } |
| useNestedState | initial | { state, get, set } |
| useBind | Please visit storybook | Please visit storybook |
| useNestedBind | Please visit storybook | Please visit storybook |
| useStateCallback | initial, f | { state, set } |
| useUndo | initial | { past, present, future, set, undo, redo } |
| useCounter | initial | { count, set, reset, inc, dec } |
| useToggle | initial | { on, set, reset, toggle } |
| useList | initial | { list, set, reset, push, sort, filter } |
| useMap | initial | { values, set, reset, clear, get, has, del } |
|

Effect

| | |
| useShallowEqualEffect | f, deps | - |
| useDeepEqualEffect | f, deps | - |
|

Network

| | |
| useFetch | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
| useOnlineStatus | | |
|

Feedback

| | |
| useHover | - | { hovered, bind } |
| useActive | - | { active, bind } |
| useFocus | - | { focused, bind } |
| useTouch | - | { touched, bind } |
|

Data Entry

| | |
| useField | initial | { value, set, reset, bind } |
|

Async

| | |
| useAsync | f | { f, loading } |

API

$3

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')
})
}
`

$3


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')
})
}
`

$3


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



)
}
`

$3

$3

$3

#### 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






)
}
`

$3

#### 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.

$3

$3

$3

`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

)
}

`


$3


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

const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (

{String(on)}
toggle
reset

)
}
`

$3

`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

)
}
`

$3

$3

`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}})
}



)
}
`

$3

$3

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

const Hover = () => {
const { hovered, bind } = useHover()
return (


hovered:
{String(hovered)}


)
}
`

$3

$3

$3

$3

`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

)
}
``