This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef, useState } from 'react' | |
/* | |
If you attempt to set some state after asynchronous request it may happen that component you wish to set state on has been unmounted. | |
This will trigger "Warning: Can’t call setState (or forceUpdate) on an unmounted component." warning. | |
This hooks is `useState` hook which prevents setting state on an unmounted component | |
Usage: | |
const [myState, mySafeSetState] = useSafeState(initialValue) | |
*/ | |
const useSafeState = (initialValue) => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Hook for handling click outside your react component */ | |
const useOutsideClick = (onOutsideClick) => { | |
const elementRef = useRef(null) | |
useEffect(() => { | |
const handleOutsideClick = (e) => { | |
if(typeof onOutsideClick === 'function' && !elementRef.current.contains(e.target)) { | |
onOutsideClick(e) | |
} | |
} | |
document.addEventListener('mousedown', handleOutsideClick, false) |