3 Awesome React Hooks

Image lazy load 🌄

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" />

  )
}

Outside click hook 🖱

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>
}

Read from and Write to clipboard ⌨️

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>
  );
}