A collection of useful custom React hooks to simplify common tasks and enhance your React applications.
npm install useful-custom-react-hooksbash
$ npm i useful-custom-react-hooks
`
Hooks
useDebounceState
$3
$3
#### The useDebounceState hook takes two parameters: value, ms
#### value (required): The initial value of the state.
#### ms (optional, default: 200): The debounce delay in milliseconds.
$3
`js
import { useDebounceState } from 'useful-custom-react-hooks'
function App() {
const [value, setValue] = useDebounceState < string > ('', 1000)
return (
{value}
type="text"
defaultValue={value}
placeholder="Type here"
onChange={(e) => setValue(e.target.value)}
/>
)
}
export default App
`
useStorage
#### The useStorage hook provides a simplified way to read and write data to the browser's localStorage.
$3
#### useStorage takes two parameters: key and initialState
#### key (required): The key to use for storing and retrieving data from localStorage.
#### initialState (optional): The initial state
$3
`js
import { useStorage } from 'useful-custom-react-hooks'
function App() {
const [data, setData] = useStorage < { message: string } > 'myData'
const handleSetData = () => {
setData({
message: 'hello world',
})
}
const handleDelete = () => {
// to delete localStorage item just set it to null
setData(null)
}
console.log(data) // {message: 'hello world'}
return (
{data?.message}
)
}
export default App
`
useIntersection
$3
$3
#### The useIntersection takes three parameters: root, rootMargin, threshold, once
#### root (optional): The element that is used as the viewport for checking the target's intersection.
#### rootMargin (optional): Margin around the root element.
#### threshold (optional): A number or an array of numbers indicating at what percentage of the target's visibility the observer's callback should be executed.
#### once (optional, default: false): A boolean indicating whether to observe once
$3
#### Tailwind used in this example.
`js
import { useIntersection } from 'useful-custom-react-hooks'
function App() {
const { isIntersecting, ref } = useIntersection({ rootMargin: '-100px' })
console.log(isIntersecting)
return (
{isIntersecting ? 'Intersecting' : 'Not intersecting'}
)
}
export default App
`
useFetch
$3
$3
#### The useFetch takes two parameters: url, opts
#### url (required): The URL to fetch.
#### opts (optional): An object with additional options for the fetch request.
$3
`js
import { useFetch } from 'useful-custom-react-hooks'
function App() {
const { data, isFetching, error, refetch } = useFetch(
'https://jsonplaceholder.typicode.com/todos/1'
)
if (isFetching) {
return Loading...
}
if (error) {
return Error: {error}
}
return (
{JSON.stringify(data)}
)
}
export default App
`
useCookie
$3
$3
#### The useCookie takes one parameter: key
#### key (required): The name of the cookie.
$3
`js
import { useCookie } from 'useful-custom-react-hooks'
function App() {
const [cookie, setCookie] = useCookie('my_cookie')
const handleSetCookie = () => {
// setCookie takes two parameters: value, opts
setCookie('cookie_value', {
expires: new Date(Date.now() + 3600000), // Expires in 1 hour
})
}
const handleDeleteCookie = () => {
// to delete cookie set it to null or set expires in opts to past date
setCookie(null)
}
return (
{cookie}
)
}
export default App
``