Custom React Hooks! 🎣 ⚛

A collection of easy-to-use React custom hooks.

• useFetch: src / doc

  importuseFetchfrom'./useFetch';constApp=()=>{const{ loading, error, data =[]}=useFetch('https://hn.algolia.com/api/v1/search?query=react');if(error)return<p>Error!</p>;if(loading)return<p>Loading...</p>;return(<div><ul>{data?.hits?.map(item=>(<likey={item.objectID}><ahref={item.url}>{item.title}</a></li>))}</ul></div>);};

• useEventListener: src / doc

  import{useRef}from'React';importuseEventListenerfrom'./useEventListener';constDialog=({ show =false, onClose =()=>null})=>{constdialogRef=useRef();// Event listener to close dialog on click outside elementuseEventListener('mousedown',event=>{// Do nothing if the event was already processedif(event.defaultPrevented){return;}// Check if click is outside the dialogif(!dialogRef?.current?.contains(event.target)){onClose();}},dialogRef.current);// Renders dailogreturnshow
  ? React.createPortal(<divref={dialogRef}>...</div>,document.body)
  : null;};

• useLocalStorage: src / doc

  importuseLocalStoragefrom'./useLocalStorage';constdefaultSettings={...};constApp=()=>{const[appSettings,setAppSettings]=useLocalStorage('app-settings',defaultSettings);return(<div><p>Your application's settings:</p><pre><code>{JSON.stringify(appSettings)}</code></pre><buttononClick={()=>setAppSettings(defaultSettings)}>Reset settings</button></div>);};

• useMediaQuery: src / doc

  importuseMediaQueryfrom'./useMediaQuery';constApp=()=>{constcanHover=useMediaQuery(// Media queries['(hover: hover)'],// Values corresponding to the above media queries by array index[true],// Default valuefalse);constcanHoverClass='opacity-0 hover:opacity-100 transition-opacity';constdefaultClass='opacity-100';return<divclassName={canHover ? canHoverClass : defaultClass}>...</div>;};

• useDarkMode: src / doc

  importuseDarkModefrom'./useDarkMode';constApp=()=>{const[darkMode,setDarkMode]=useDarkMode();return(<div>
  Dark mode:
  <buttononClick={()=>setDarkMode(prev=>!prev)}>{darkMode ? 'Disable' : 'Enable'}</button></div>);};