\n
\n )\n }\n```\n\n### useElementSize\n\nThis hook helps you to dynamically recover the width and the height of an HTML element. Dimensions are updated when\nresizing the window.\n\n```jsx\n export default function Component() {\n const squareRef = useRef(null)\n const {width, height} = useElementSize(squareRef)\n return (\n <>\n Value real-time: {value}
\nDebounced value: {debouncedValue}
\n \n{`the square width is ${width}px and height ${height}px`}
\n\n \n
\n )\n }\n```\n\n### useFetch\n\nHere is a React Hook which aims to retrieve data on an API using the native Fetch API.\nI used a reducer to separate state logic and simplify testing via functional style.\nThe received data is saved (cached) in the application via useRef, but you can use LocalStorage\n[(see useLocalStorage())](uselocalstorage) or a caching solution to persist the data. The fetch is executed when\nthe component is mounted and if the url changes. If ever the url is undefined, or if the component is unmounted\nbefore the data is recovered, the fetch will not be called. This hook also takes the request config\nas a second parameter in order to be able to pass the authorization token in the header of the request,\nfor example. Be careful though, the latter does not trigger a re-rendering in case of modification,\ngo through the url params to dynamically change the request.\n\n```jsx\n export const DogImage: FC = () => {\n const {data,} = useFetch < DogImageType > ({\n url: \"https://dog.ceo/api/breed/beagle/images/random\",\n init: {/* options here*/}\n });\n \n return <>{data ? Loading
}\n }\n```\n\n### useHover\n\nReact UI sensor hook that determine if the mouse element is in the hover element using Javascript Typescript instead\nCSS. This way you can separate the logic from the UI.\n\n```jsx\n export default function Component() {\n const hoverRef = useRef(null)\n const isHover = useHover(hoverRef)\n \n return (\n \n {`The current div is ${isHover ? `hovered` : `unhovered`}`}\n
\n )\n }\n```\n\n### useImageOnLoad\n\nA simple React Hook that helps you improve UX while images are loading. Rather than having an image that \"unfolds\" from\ntop to bottom, we load a smaller version first which will be blurred and which will be replaced by the normal size image\nonce loaded. You can see an implementation of this hook on this\nsite: [React Gallery](https://react-gallery-ux.netlify.app/). Don't hesitate to take the logic and write your own CSS\ninstead.\n\n```jsx\n import React, {CSSProperties} from 'react'\n import {useImageOnLoad} from 'react-util-hooks'\n \n export default function Component() {\n const {handleImageOnLoad, css} = useImageOnLoad()\n const style: { [key: string]: CSSProperties } = {\n wrap: {\n position: 'relative',\n width: 600,\n height: 600,\n },\n image: {\n position: 'absolute',\n width: `100%`,\n height: `100%`,\n },\n }\n return (\n \n {/* Small image load fast */}\n
\n )\n }\n```\n\n### useIntersectionObserver\n\nThis React Hook detects visibility of a component on the viewport using\nthe [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API natively\npresent in the browser. It can be very useful to lazy-loading of images, implementing \"infinite scrolling\" or starting\nanimations for example. Your must pass the ref element (from useRef()). It takes optionally root, rootMargin and\nthreshold arguments from the native IntersectionObserver API and freezeOnceVisible to only catch the first appearance\ntoo. It returns the full IntersectionObserver's entry object.\n\n```jsx\n import React, {FC, useRef} from 'react'\n import {useIntersectionObserver} from 'react-util-hooks'\n \n const Section: FC = ({children}) => {\n const ref = useRef < HTMLDivElement | null > (null)\n const entry = useIntersectionObserver(ref, {})\n const isVisible = !!entry?.isIntersecting\n console.log(`Render Section ${children?.toString()}`, {isVisible})\n return (\n {children}
\n \n )\n }\n export default function Component() {\n return (\n <>\n {count}
\n \n\n \n \n
\n \n )\n }\n```\n\n### useIsClient\n\nThis react hook is very simple but it is useful. Indeed, if you manually do a typeof window! ==\" undefined \" type check,\nthen your function will be escaped, but it will stop there. Thanks to this hook, there will be a first render where\nisClient will be false, then when the window is ready, the useEffect will be executed, will update the value of isClient\nand restart your component with the window defined.\n\n```jsx\n export default function Component() {\n const isClient = useIsClient()\n \n return{isClient ? 'Client' : 'server'}
\n }\n```\n\n### useIsFirstRender\n\nThis hook returns true at mount time and false after that\n\n```typescript jsx\n import React, { useEffect, useState } from 'react'\n import { useIsFirstRender } from 'react-util-hooks'\n \n export default function Component() {\n const isFirst = useIsFirstRender()\n const [data, setData] = useState\n
\n )\n }\n```\n\n### useKeyPress\n\nThis hook makes it easy to detect when the user is pressing a specific key on their keyboard. The recipe is fairly\nsimple, as I want to show how little code is required, but I challenge any readers to create a more advanced version of\nthis hook. Detecting when multiple keys are held down at the same time would be a nice addition. Bonus points: also\nrequire they be held down in a specified order. Feel free to share anything you've created in\nthis [recipe's gist](https://gist.github.com/gragland/b61b8f46114edbcf2a9e4bd5eb9f47f5)\n\n```jsx\n function App() {\n // Call our hook for each key that we'd like to monitor\n const happyPress = useKeyPress(\"h\")\n const sadPress = useKeyPress(\"s\")\n const robotPress = useKeyPress(\"r\")\n const foxPress = useKeyPress(\"f\")\n return (\n Open your console
\nIs first render: {isFirst ? 'yes' : 'no'}
\n \n\n
\n )\n }\n```\n\n### useLocalStorage\n\nPersist the state with local storage so that it remains after a page refresh. This can be useful for a dark theme or to\nrecord session information. This hook is used in the same way as useState except that you must pass the storage key in\nthe 1st parameter. If the window object is not present (as in SSR), ```useLocalStorage()``` will return the default\nvalue\n\n```jsx\n export default function Component() {\n const [isDarkTheme, setDarkTheme] = useLocalStorage('darkTheme', true)\n \n const toggleTheme = () => {\n setDarkTheme(!isDarkTheme)\n }\n \n return (\n \n )\n}\n```\n\n### useLockedBody\n\nThis React hook is used to block the scrolling of the page. A good example of a use case is when you need to open a\nmodal. For flexibility, this hook offers 2 APIs:\n\nUse it as we would use a useState (example 1)\n\nUse it with our own logic, coming from a props or redux for example (example 2)\n\nFinally, you can optionally change the reflow padding if you have another sidebar size than the default (15px)\n\n```jsx\n const fixedCenterStyle: CSSProperties = {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n }\n \n // Example 1: useLockedBody as useState()\n export function Component1() {\n const [locked, setLocked] = useLockedBody()\n const toggleLocked = () => {\n setLocked(!locked)\n }\n return (\n <>\n \n \n \n )\n }\n \n // Example 2: useLockedBody with our custom state\n export function Component2() {\n const [locked, setLocked] = useState(false)\n const toggleLocked = () => {\n setLocked(!locked)\n }\n useLockedBody(locked)\n return (\n <>\n \n \n \n )\n }\n```\n\n### useMedia\n\nThis hook makes it super easy to utilize media queries in your component logic. In our example below we render a\ndifferent number of columns depending on which media query matches the current screen width, and then distribute images\namongst the columns in a way that limits column height difference (we don't want one column way longer than the rest).\nYou could create a hook that directly measures screen width instead of using media queries, but this method is nice\nbecause it makes it easy to share media queries between JS and your stylesheet. See it in action in\nthe [CodeSandbox Demo](https://codesandbox.io/s/6jlmpjq9vw).\n\n```jsx\n function App() {\n const columnCount = useMedia(\n // Media queries\n [\"(min-width: 1500px)\", \"(min-width: 1000px)\", \"(min-width: 600px)\"],\n // Column counts (relates to above media queries by array index)\n [5, 4, 3],\n // Default column count\n 2\n );\n // Create array of column heights (start at 0)\n let columnHeights = new Array(columnCount).fill(0);\n // Create array of arrays that will hold each column's items\n let columns = new Array(columnCount).fill().map(() => []);\n data.forEach((item) => {\n // Get index of shortest column\n const shortColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));\n // Add item\n columns[shortColumnIndex].push(item);\n // Update height\n columnHeights[shortColumnIndex] += item.height;\n });\n // Render columns and items\n return (\n h, s, r, f
\n \n {happyPress && \"š\"}\n {sadPress && \"š¢\"}\n {robotPress && \"š¤\"}\n {foxPress && \"š¦\"}\n
\n \n
\n \n );\n }\n```\n\n### useOnClickOutside\n\nReact hook for listening for clicks outside a specified element (see useRef). This can be useful for closing a modal, a\ndropdown menu etc.\n\n```jsx\n export default function Component() {\n const ref = useRef(null)\n \n const handleClickOutside = () => {\n // Your custom logic here\n console.log('clicked outside')\n }\n \n const handleClickInside = () => {\n // Your custom logic here\n console.log('clicked inside')\n }\n \n useOnClickOutside(ref, handleClickOutside)\n \n return (\n \n {columns.map((column) => (\n
\n ))}\n \n {column.map((item) => (\n \n 
\n
\n ))}\n \n \n {onScreen ? (\n
\n \n );\n }\n```\n\n### usePrevious\n\nOne question that comes up a lot is \"When using hooks how do I get the previous value of props or state?\". With React\nclass components you have the componentDidUpdate method which receives previous props and state as arguments or you can\nupdate an instance variable (this.previous = value) and reference it later to get the previous value. So how can we do\nthis inside a functional component that doesn't have lifecycle methods or an instance to store values on? Hooks to the\nrescue! We can create a custom hook that uses the useRef hook internally for storing the previous value. See the recipe\nbelow with inline comments. You can also find this example in the\nofficial [React Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)\n\n```jsx\n function App() {\n // State value and setter for our example\n const [count, setCount] = useState(0);\n // Get the previous value (was passed into hook on last render)\n const prevCount = usePrevious(count);\n // Display both current and previous count value\n return (\n \n
\n Scroll down to next section š
\n\n ![](\"https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif\"/)
\n
\n ) : (\n Hey I'm on the screen
\n\n Scroll down 300px from the top of this section š
\n )}\n\n
\n );\n }\n```\n\n### useReadLocalStorage\n\nThis React Hook allows you to read a value from localStorage by its key.\nIt can be useful if you just want to read without passing a default value.\nIf the window object is not present (as in SSR), or if the value doesn't exist,\nuseLocalStorage() will return null.\n\n```\n export default function Component() {\n // Assuming a value was set in localStorage with this key\n const darkMode = useReadLocalStorage('darkMode')\n \n return \n Now: {count}, before: {prevCount}\n
\n \nDarkMode is {darkMode ? 'enabled' : 'disabled'}
\n }\n```\n\nNote: If you want to be able to change the value, look [useLocalStorage()](uselocalstorage)\n\n### useScreen\n\nEasily retrieve window.screen object with this Hook React which also works onRezise.\n\n```jsx\n export default function Component() {\n const screen = useScreen()\n \n return (\n\n The current window dimensions are:{' '}\n
\n )\n }\n```\n\n### useScript\n\nDynamically load an external script in one line with this React hook. This can be useful to integrate a third party\nlibrary like Google Analytics or Stripe. This avoids loading this script in the head tag on all your pages if it is not\nnecessary.\n\n```jsx\n // it's an example, use your types instead\n // declare const jQuery: any\n export default function Component() {\n // Load the script asynchronously\n const status = useScript(`https://code.jquery.com/jquery-3.5.1.min.js`)\n \n useEffect(() => {\n if (typeof jQuery !== 'undefined') {\n // jQuery is loaded => print the version\n alert(jQuery.fn.jquery)\n }\n }, [status])\n \n return (\n \n {JSON.stringify({width: screen?.width, height: screen?.height})}\n \n \n
\n )\n }\n```\n\n### useSessionStorage\n\nThis hook saves the data in memory, kind of like localstorage but this time it saves the data in the session and browser\ndeletes the session if you close the browser or even the tab. You have to save string value in the session storage. If\nyou want to save an object, checkout [useSessionStorageWithObject](#usesessionstoragewithobject) instead\n\n```jsx\n function App() {\n const [item, setItem] = useSessionStorage('name', 'Initial Value');\n return (\n {`Current status: ${status}`}
\n \n {status === 'ready' &&You can use the script here.
}\n\n
\n );\n }\n```\n\n### useSessionStorageWithObject\n\nThis hook actually uses [useSessionStorage](#usesessionstorage). But it takes an object and stringify it and then save\nit. It also parses the data when fetching from the browser, so you can use it like a regular object.\n\n```jsx\n function App() {\n const [form, setForm] = useSessionStorage < {email: string, name: string} > ('name', {name: '', email: ''});\n return (\n Set Name to store in Local Storage
\n\n \n
\n \n
\n );\n }\n```\n\n### useUpdateEffect\n\nThis hook is just the modified version of useEffect that is skipping the first render.\n\n```typescript jsx\n import React, { useEffect, useState } from 'react'\n import { useUpdateEffect } from 'react-util-hooks'\n \n export default function Component() {\n const [data, setData] = useStateSet Name to store in Local Storage
\n\n \n
\n \n \n
\n \n
\n )\n }\n```\n\n### useTimeout\n\nVery similar to the [useInterval](https://usehooks-typescript.com/react-hook/use-interval) hook, this React hook\nimplements the native setTimeout function keeping the same interface. You can enable the timeout by setting delay as a\nnumber or disabling it using null. When the time finish, the callback function called.\n\n```jsx\n export default function Component() {\n const [visible, setVisible] = useState(true)\n const hide = () => setVisible(false)\n useTimeout(hide, 5000)\n return (\n Open your console
\n \n\n
\n )\n }\n```\n\n### useSsr\n\nQuickly know where your code will be executed;\n\n- In the server (Server-Side-Rendering) or\n- In the client, the navigator\n\nThis hook doesn't cause an extra render, it just returns the value directly, at the mount time,\nand it didn't re-trigger if the value changes.\n\nOtherwise, If you want to be notified when the value changes to react to it,\nyou can use [useIsClient()](useisclient) instead.\n\n```\n export default function Component() {\n const { isBrowser } = useSsr()\n \n return \n {visible\n ? \"I'm visible for 5000ms\"\n : 'You can no longer see this content'}\n
\n{isBrowser ? 'Browser' : 'Server'}!
\n }\n```\n\n### useToggle\n\nBasically, what this hook does is that, it takes a parameter with value true or false and toggles that value to\nopposite. It's useful when we want to take some action into it's opposite action, for example: show and hide modal, show\nmore/show less text, open/close side menu.\n\n```jsx\n function App() {\n // Call the hook which returns, current value and the toggler function\n const [isTextChanged, setIsTextChanged] = useToggle();\n \n return (\n \n );\n }\n```\n\n### useWindowSize\n\nEasily retrieve window dimensions with this Hook React which also works onRezise.\n\n```jsx\n export default function Component() {\n const {width, height} = useWindowSize()\n \n return (\n\n The current window dimensions are:{' '}\n
\n )\n }\n```\n\n## Project status\n\nI created this library because I needed it. Feel free to use it and give feedbacks.\n\nYou can also create hooks and send PR, thanks.\n\nIf you find any bugs or have new hook ideas, [create an issue](https://github.com/prantaDutta/react-util-hooks/issues).\n\n## Support Me\n\nBecome a [Patreon](https://www.patreon.com/prantadutta) š„°š\n\n## References\n\n- https://usehooks-typescript.com/\n- https://usehooks.com/","readmeFilename":"README.md"}{JSON.stringify({width, height})}\n