The React community has created incredible hooks since this feature was released, I will show some of the 5 that I use and help me a lot.<\/p>\n\n\n\n\n\n\n\n
React use lazy load image<\/a> uses the Intersection Observer API<\/a> to provide a performant solution to lazy loading images, it a super lightweight so won’t add any extra bulk to your app, and its very simple to use:<\/p>\n\n\n\n I think that useOnClickOutside<\/a> is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example. useLocation<\/a> help you to get browser location.<\/p>\n\n\n\nimport React from 'react';\nimport useLazyLoadImage from 'react-use-lazy-load-image';\n\nfunction App() {\n useLazyLoadImageReact();\n\n return (\n <div>Lots of content that means the image is off screen goes here<\/div>\n <img src=\"IMAGE DATA\" data-img-src=\"https:\/\/link-to-my-image.com\/image.png\" alt=\"My image\" \/>\n\n )\n}\n<\/code><\/pre>\n\n\n\nOutside click hook ?<\/h2>\n\n\n\n
Here is a demo code:<\/p>\n\n\n\nimport * as React from 'react'\nimport useOnClickOutside from 'use-onclickoutside'\n\nexport default function Modal({ close }) {\n const ref = React.useRef(null)\n useOnClickOutside(ref, close)\n\n return <div ref={ref}>{'Modal content'}<\/div>\n}\n<\/code><\/pre>\n\n\n\nGet browser location ?<\/h2>\n\n\n\n
import {useLocation} from 'react-use';\n\nconst Demo = () => {\n const state = useLocation();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n <\/pre>\n );\n};\n<\/code><\/pre>\n\n\n\nRead from and Write to clipboard \u2328\ufe0f<\/h2>\n\n\n\n