Awesome
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 |
---|---|---|
<h6>Lifecycles</h6> | ||
useDidMount | f | - |
useWillUnmount | f | - |
useDidUpdate | f, conditions | - |
<h6>State</h6> | ||
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 } |
<h6>Effect</h6> | ||
useShallowEqualEffect | f, deps | - |
useDeepEqualEffect | f, deps | - |
<h6>Network</h6> | ||
useFetch | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
useOnlineStatus | ||
<h6>Feedback</h6> | ||
useHover | - | { hovered, bind } |
useActive | - | { active, bind } |
useFocus | - | { focused, bind } |
useTouch | - | { touched, bind } |
<h6>Data Entry</h6> | ||
useField | 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.
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.
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. 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>
)
}
createContextState(initial?)
createGlobalState(initial?)
useMergeState(initial?)
Arguments
initial?: Object
: Initial state object, default is{}
.
Returns
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>
)
}
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)
, 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.
useStateCallback(initial, f?)
useUndo(initial)
useCounter(initial)
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)
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)
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?)
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()
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)
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>
)
}