React hooks
npm install as-react-hooksReact hooks
Executes a callback with a continuous delay
``
useInterval(getTwitterFeedUpdates, 1000)
Hook that supports server side rendering when using local storage
`
const storage = useLocalStorage()
Hook that supports server side rendering when using the Window object
`
const _window = useWindow()
`
setCookie('cookie-name', 'some value')
getCookie('cookie-name')
deleteCookie('cookie-name')
Resolves an async function
`
const { state, callback } = useAsync(async () => {
await promiseTimeout(2000);
return "test";
});
useEffect(() => {
if (!state.called) {
callback();
}
}, [callback, state]);
`
useEffect for asyn functions
`
useEffectAsync(async () => {
await promiseTimeout(2000);
return "test";
}, []);
Async request parallel execution engine with throttling
`
const { throttleActions, throttleProgress } = useThrottleRequests(10) // max parallelisation = 10
const sampleApiCall = async () => {
try {
const response = await fetch(...)
const response = await response.json()
throttleActions.requestSucceededWithData(response)
} catch (error) {
throttleActions.requestFailedWithError(error)
}
}
const { state, callback } = useAsync(async() => {
const requestsToMake = [sampleApiCall, / some other api calls /]
await throttleActions.queueRequests(requestsToMake);
});
...
{JSON.stringify(state)}
{throttleProgress.loading &&
useShoppingCart
MyProductType must have an id of type number or string
const myProduct = {
id: 1,
name: 'Apples'
} const { items, updateCart, removeProduct, clearItems } = useShoppingCart()
updateCart(myProduct, 2)
updateCart(myProduct, -1) // 1 apple now in cart
removeProduct(myProduct) // cart empty
useStringFilter
Query over a data set
const data = [
{ id: 1, name: 'one' },
{ id: 2, name: 'two' },
{ id: 13, name: 'thirteen' },
] const {
queryString,
filteredItems,
setFilter,
} = useStringFilter(data, ['id', 'name'])
setFilter('1')
console.log(filteredItems)
useOutsideClick
Responds to click events outside of a component
export const MyComponent = () => {
const [toggle, setToggle] = useState(false)
const ref = useRef(null) useOutsideClick(ref, () => {
setToggle(!toggle);
})
return (
{toggle ? toggle ON : toggle OFF}
)
}