Top React Hooks — Hotkeys, Visibility, Width, and Meta Tags

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-hotkeys-hook

The react-hotkeys-hook library has a hook that lets us listen to hotkey presses.

To install it, we run:

npm install react-hotkeys-hook

or:

yarn add react-hotkeys-hook

Then we can use it by writing:

import React from "react";
import { useHotkeys } from "react-hotkeys-hook";

export default function App() {
  const [count, setCount] = React.useState(0);
  useHotkeys("ctrl+", () => setCount(prevCount => prevCount + 1));

  return <p>Pressed {count} times.</p>;
}

The useHotkeys hook lets us listen to key combo presses.

The first argument is the key combination.

The 2nd is the callback that runs when the key combo is pressed.

react-intersection-visible-hook

The react-intersection-visible-hook library lets us detect the visibility of a component.

To use it, we can install it by running:

npm i react-intersection-visible-hook

Then we can use it by writing:

import React from "react";
import useVisibility from "react-intersection-visible-hook";

export default function App() {
  const nodeRef = React.useRef(null);
  const visibility = useVisibility(nodeRef);

  return (
    <>
      <div className="App" ref={nodeRef}>
        <p style={{ position: "fixed" }}>
          {visibility.isIntersecting && visibility.isIntersecting.toString()}
        </p>
        <p>hello</p>
      </div>
    </>
  );
}

We create the ref and then pass it to the useVisibility hook.

Then we pass the ref to the ref prop to watch the div.

Then we can use it with the visible.isIntersecting property to check for the visibility of the div.

react-media-hook

The react-media-hook library lets us watch for the dimensions of the screen.

To install it, we run:

yarn add react-media-hook

or:

npm i react-media-hook --save

Then we can use it by writing:

import React from "react";
import { useMediaPredicate } from "react-media-hook";

export default function App() {
  const biggerThan300 = useMediaPredicate("(min-width: 300px)");

  return <div>{biggerThan300 && <button>click me</button>}</div>;
}

We pass the media query into the useMediaPredicate hook to watch the width of the screen.

It’ll return true if the screen width is 300px or wider.

Then we can show something given the width.

React MetaTags Hook

The React MetaTags Hook lets us add various attributes to our meta tags.

We can use it by installing it by running:

npm install react-metatags-hook

or:

yarn add react-metatags-hook

Then we can use it by writing:

import React from "react";
import useMetaTags from "react-metatags-hook";

const Page = ({ match }) => {
  const {
    params: { id },
    url
  } = match;
  useMetaTags(
    {
      title: `Page Title`,
      description: `A pahe with id: ${id}`,
      charset: "utf8",
      lang: "en",
      metas: [
        { name: "keywords", content: "foo, bar" },
        { name: "robots", content: "index, follow" },
        { name: "DC.Title", content: "Dublin Core Title" },
        { name: "url", content: `http://example.com${url}` },
        { property: "fb:app_id", content: "1234567890" },
        { "http-equiv": "Cache-Control", content: "no-cache" }
      ],
      links: [
        { rel: "canonical", href: "http://example.com" },
        { rel: "icon", type: "image/ico", href: "/favicon.ico" },
        {
          rel: "apple-touch-icon",
          sizes: "72x72",
          type: "image/png",
          href: "/apple-72.png"
        }
      ],
      openGraph: {
        title: "Page Title",
        image: "http://example.com/ogimage.jpg",
        site_name: "My Site"
      },
      twitter: {
        card: "summary",
        creator: "[@you](http://twitter.com/you "Twitter profile for @you")",
        title: "Page Title"
      }
    },
    [id, url]
  );
  return <>hello</>;
};

export default function App() {
  return (
    <div>
      <Page match={{ params: { id: 1 }, url: "example" }} />
    </div>
  );
}

We just use it by creating an object with properties that are valid meta tag attributes.

They include the title , description , charset , lang , of:* and twitter:* attributes.

We can put everything in and they’ll be added into meta tags.

Conclusion

The react-hotkeys-hook library lets us watch for hotkey presses.

react-intersection-visible-hook lets us watch for visibility of an element.

react-media-hook lets us check for various screen sizes.

React MetaTags Hook lets us add meta tags dynamically.