A collection of hooks we find ourselves turning to in multiple projects
npm install --save @bellawatt/react-hooks
import React, { useState } from 'react'
import axios from 'axios';
import { useDebounceEffect } from '@bellawatt/react-hooks'
const DebounceEffectExample = () => {
const [value, setValue] = useState('');
useDebounceEffect(() => {
someSlowFunction();
}, 1000, [value]));
return (
<div>
<input value={value} onChange={e => setValue(e.currentTarget.value)} />
</div>
)
}
import React from 'react'
import { useToggle } from '@bellawatt/react-hooks'
import { Modal } from 'reactstrap'
const ToggleExample = () => {
const [open, toggle] = useToggle(false)
return (
<Modal isOpen={open} toggle={toggle}>
...
</Modal>
)
}
import React from 'react'
import { useLocalStorage } from '@bellawatt/react-hooks'
const LocalStorageExample = () => {
const [storedData, setStoredData] = useLocalStorage('name-of-key')
// ..
}
** Requires a peer of react-router-dom and react-ga **
import React from 'react'
import { useGoogleAnalytics } from '@bellawatt/react-hooks'
const GoogleAnalyticsExample = () => {
useGoogleAnalytics('google-key')
// ..
}
** Requires a peer of react-router-dom **
import React from 'react'
import { useQueryString } from '@bellawatt/react-hooks'
const QueryStringExample = () => {
const [urlInputs, updateQueryString] = useQueryString()
// ..
}
MIT © bellawatt
This hook is created using create-react-hook.