Handy Custom React Hooks for Daily Use
If you are working on React, React hooks is one thing that makes your life easier. With custom hooks, you can make your code more reusable and structured.
Here are some hooks that will be handy in your daily code.
useDialog:
React Hook to handle open and close dialogs
function useDialogHook() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return [open, handleClickOpen, handleClose]
}export default useDialogHook
useCounter:
React Hook to handle counter, increment, and decrement
function useCounter(defaultValue=0) {
const [counter, setCounter] = React.useState(defaultValue);
const increment = () => {
setCounter(counter+1);
};
const decrement = () => {
setCounter(counter-1);
};
return [counter, increment, decrement]
}export default useCounter
useClickInside:
When you want to call a function when clicked inside the element Ex: Modal PopUp
Pass the callback with useCallBack in your function since its functionality always remains same for better performance.
export function useClickInside(elementRef, callback) {
const callbackRef = useRef(callback)
React.useEffect(() => {
const handleClickInside = (event) => {
event.preventDefault()
if (elementRef && elementRef.current && elementRef.current.contain(event.target)) {
callbackRef.current()
}
return
}
document.addEventListener(‘click’, handleClickInside, true)
return () => {
document.removeEventListener(‘click’, handleClickinside, true)
}
}, [elementRef, callback])
}useClickOutside:
When you want to call a function when clicked outside the element Ex: Modal PopUp
Pass the callback with useCallBack in your function since its functionality always remains the same for better performance.
export function useClickOutside2(elementRef, callback) {
const callbackRef = useRef(callback)
React.useEffect(() => {
const handleClickOutside = (event) => {
event.preventDefault()
if (elementRef && elementRef.current && !elementRef.current.contain(event.target)) {
// Call Callback only if event happens outside element or descendent elements
callbackRef.current()
}
return
}
document.addEventListener(‘click’, handleClickOutside, true)
return () => {
document.removeEventListener(‘click’, handleClickOutside, true)
}
}, [elementRef, callback])
}useFetch:
React Hook to call APIs on load with Fetch
export default function useFetch(url, options = initialOptions) {
const [response, setResponse] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(false)
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true)
const res = await fetch(url, options)
const json = await res.json()
setResponse(json)
} catch (err) {
setLoading(false)
setError(err)
}
finally {
setLoading(false)
}
}
fetchData()
}, [])
return { response, error, loading }
}usePrevious:
React Hook to use previous state and props
export default function usePrevious(value) {
const previousValue = useRef(value)
useEffect(() => {
previousValue.current = value;
})// Return previous value (happens before update in useEffect above)
return previousValue.current
}
useToggle:
React Hook to handle toggle button and lists
function useToggle(defaultState) {
const [open, setOpen] = useState(defaultState||false);const toggleFun = (e) => {
setOpen(!open);
e.stopPropagation();
};return [open, toggleFun]
}export default useToggle
You can find the repository in Github Here:
Will keep the blog and repository updated with more hooks. Feel free to fork or contribute.
More hooks to come.. Stay tuned..
