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
useDidMount(f)
Similar to componentDidMount in React class component.
Arguments
f: () => void: f is called when component did mount.
{
useDidMount(() => {
console.log('didMount')
})
}">import { useDidMount } from 'react-hooks-lib'
const MyComponent = () => {
useDidMount(() => {
console.log('didMount')
})
}
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.
{
useWillUnmount(() => {
console.log('willUnmount')
})
}">import { useWillUnmount } from 'react-hooks-lib'
const MyComponent = () => {
useWillUnmount(() => {
console.log('willUnmount')
})
}
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. LikeuseEffect, f can return a clean-up function.conditions?: Array: Optional array for conditionally firing an effect, same as the second argument passed touseEffect.
{
const { count, inc } = useCounter(0)
useDidUpdate(() => {
console.log('DidUpdate')
})
return (
const MyComponent = () => {
const { count, inc } = useCounter(0)
useDidUpdate(() => {
console.log('DidUpdate')
})
return (
<div>
{`count: ${count}`}
<button onClick={() => inc(1)}>+1button>
div>
)
}
{`count: ${count}`}
)
}">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)}>+1button>
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: LikesetStatein React class component, merge the old and new state together.
{
const { state, set } = useMergeState({ name: 'Victor', age: 1 })
return (
)
}">import { useMergeState } from 'react-hooks-lib'
const MergeState = () => {
const { state, set } = useMergeState({ name: 'Victor', age: 1 })
return (
<div>
<h3>useMergeStateh3>
<div>
{`state: ${JSON.stringify(state)}`}
<button onClick={() => set(({ age }) => ({ age: age + 1 }))}>age+1button>
div>
div>
)
}
useMergeState
{`state: ${JSON.stringify(state)}`}
const MergeState = () => {
const { state, set } = useMergeState({ name: 'Victor', age: 1 })
return (
<div>
<h3>useMergeStateh3>
<div>
{`state: ${JSON.stringify(state)}`}
<button onClick={() => set(({ age }) => ({ age: age + 1 }))}>age+1button>
div>
div>
)
}
useNestedState
Arguments
initial?: Initial state, default isundefined.
Returns
state: Current state.get(pathString, defaultValue): Get value form state at a specificpathString. eg:get("a.b.c")/get("" | undefined), ifpathStringis empty,it will return the state object.set: (pathString, newValue | prevValue => newValue): Set value at a specificpathString. eg:set("a.b.c", prev => prev + 1)/set("" | undefined, {}). ifpathStringis empty,it will set the entire state object.
useStateCallback(initial, f?)
useUndo(initial)
useCounter(initial)
{
const {
count, inc, dec, reset,
} = useCounter(1)
return (
const Counter = () => {
const {
count, inc, dec, reset,
} = useCounter(1)
return (
<div>
{count}
<button onClick={() => inc(1)}>+1button>
<button onClick={() => dec(1)}>-1button>
<button onClick={reset}>resetbutton>
div>
)
}
{count}
)
}
">import { useCounter } from 'react-hooks-lib'const Counter = () => {
const {
count, inc, dec, reset,
} = useCounter(1)
return (
<div>
{count}
<button onClick={() => inc(1)}>+1button>
<button onClick={() => dec(1)}>-1button>
<button onClick={reset}>resetbutton>
div>
)
}
useToggle(initial)
{
const { on, toggle, reset } = useToggle(false)
return (
const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (
<div>
{String(on)}
<button onClick={toggle}>togglebutton>
<button onClick={reset}>resetbutton>
div>
)
}
{String(on)}
)
}">import { useToggle } from 'react-hooks-lib'const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (
<div>
{String(on)}
<button onClick={toggle}>togglebutton>
<button onClick={reset}>resetbutton>
div>
)
}
useList(initial)
{
const { list, sort, filter } = useList([1, 4, 2, 3, 4, 2, 6, 8, 3, 4])
return (
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)}>sortbutton>
<button onClick={() => filter(x => x >= 4)}> greater than or equal to 4button>
div>
)
}
list:
{JSON.stringify(list)}
)
}">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)}>sortbutton>
<button onClick={() => filter(x => x >= 4)}> greater than or equal to 4button>
div>
)
}
useMap(initial)
useFetch(initialUrl, initialOptions?, onMount?)
{
const getUrl = text => `https://api.github.com/search/repositories?q=${text}`
const { value, bind } = useField('react')
const { data, loading, setUrl } = useFetch(getUrl('react'))
return (
)
}">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>useFetchh3>
<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>
)
}
useFetch
{ loading ?Loading...
: ({`total_count: ${data.total_count}`})
}
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>useFetchh3>
<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()
{
const { hovered, bind } = useHover()
return (
)
}">import { useHover } from 'react-hooks-lib'
const Hover = () => {
const { hovered, bind } = useHover()
return (
<div>
<div {...bind}>
hovered:
{String(hovered)}
div>
div>
)
}
hovered:
{String(hovered)}
const Hover = () => {
const { hovered, bind } = useHover()
return (
<div>
<div {...bind}>
hovered:
{String(hovered)}
div>
div>
)
}
useActive()
useFocus()
useTouch()
useField(initial)
{
const { value, bind } = useField('Type Here...')
return (
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">appleoption>
<option value="orange">orangeoption>
select>
div>
)
}
input text:
{value}
)
}
const Select = () => {
const { value, bind } = useField('apple')
return (
selected:
{value}
)
}"> 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">appleoption>
<option value="orange">orangeoption>
select>
div>
)
}