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.
npm i react-hooks-lib --save
Visit storybook
Name | Arguments | Returns |
---|---|---|
useDidMount |
f | - |
useWillUnmount |
f | - |
useDidUpdate |
f, conditions | - |
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 } |
useShallowEqualEffect |
f, deps | - |
useDeepEqualEffect |
f, deps | - |
useFetch |
initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
useOnlineStatus |
||
useHover |
- | { hovered, bind } |
useActive |
- | { active, bind } |
useFocus |
- | { focused, bind } |
useTouch |
- | { touched, bind } |
useField |
initial | { value, set, reset, bind } |
useAsync |
f | { f, loading } |
Similar to componentDidMount
in React class component.
f: () => void
: f is called when component did mount.
import { useDidMount } from 'react-hooks-lib'
const MyComponent = () => {
useDidMount(() => {
console.log('didMount')
})
}
Close to the componentWillUnmount
in React class component.
f: () => void
: f is called when component will unmount.
import { useWillUnmount } from 'react-hooks-lib'
const MyComponent = () => {
useWillUnmount(() => {
console.log('willUnmount')
})
}
Similar to componentDidUpdate
, it only runs on updates.
f: () => Function | void
: f is called on every updates. LikeuseEffect
, f can return a clean-up function.conditions?: Array<any>
: Optional array for conditionally firing an effect, same as the second argument passed touseEffect
.
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>
)
}
initial?: Object
: Initial state object, default is{}
.
state: Object
: Current state object.set: ((Object) => Object) | Object
: LikesetState
in React class component, merge the old and new state together.
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>
)
}
initial?
: Initial state, default isundefined
.
state
: Current state.get(pathString, defaultValue)
: Get value form state at a specificpathString
. eg:get("a.b.c")
/get("" | undefined)
, ifpathString
is 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, {})
. ifpathString
is empty,it will set the entire state object.
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>
)
}
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>
)
}
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>
)
}
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>
)
}
import { useHover } from 'react-hooks-lib'
const Hover = () => {
const { hovered, bind } = useHover()
return (
<div>
<div {...bind}>
hovered:
{String(hovered)}
</div>
</div>
)
}
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>
)
}