5 Awesome React Hooks

import React from 'react';import useLazyLoadImage from 'react-use-lazy-load-image';function App() {  useLazyLoadImageReact();  return (    <div>Lots of content that means the image is off screen goes here</div>    <img src="IMAGE DATA" data-img-src="https://link-to-my-image.com/image.png" alt="My image" />  )}

import * as React from 'react'import useOnClickOutside from 'use-onclickoutside'export default function Modal({ close }) {  const ref = React.useRef(null)  useOnClickOutside(ref, close)  return <div ref={ref}>{'Modal content'}</div>}

import {useLocation} from 'react-use';const Demo = () => {  const state = useLocation();  return (    <pre>      {JSON.stringify(state, null, 2)}    </pre>  );};

import useClippy from 'use-clippy';export default function MyComponent() {  const [clipboard, setClipboard] = useClippy();  return (    <div>      <button        onClick={() => {          alert(`Your clipboard contains: ${clipboard}`);        }}      >        Read my clipboard      </button>      <button        onClick={() => {          setClipboard(`Random number: ${Math.random()}`);        }}      >        Copy something new      </button>    </div>  );}

import useDocumentTitle from '@rehooks/document-title';function MyComponent() {  useDocumentTitle('Page Title');  return <div/>;}