Category: React

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-use-input

The react-use-input lets us bind to inputs easily with our React component.

To use it, we run:

yarn add react-use-input

Then we can use it by writing:

import React from "react";
import useInput from "react-use-input";

export default function App() {
  const [name, setName] = useInput();

  return (
    <>
      <input value={name} onChange={setName} />
      <p>{name}</p>
    </>
  );
}

We just use the useInput hook, which returns an array with the form field state and the function to set the input value to the form field state.

Likewise, we can do the same for a checkbox.

For example, we can write:

import React from "react";
import useInput from "react-use-input";

export default function App() {
  const [selected, setSelected] = useInput(false, "checked");

  return (
    <>
      <input type="checkbox" checked={selected} onChange={setSelected} />
      <p>{selected.toString()}</p>
    </>
  );
}

The useInput hook takes 2 arguments.

The first is the checked value.

The 2nd is the attribute name.

We can pass the state and the state setter function into our checkbox input.

react-use-lazy-load-image

react-use-lazy-load-image lets us lazy load our images.

This means that the image loads only when we display the image.

To install it, we run:

npm i react-use-lazy-load-image

Then we can use it by writing:

import React from "react";
import useLazyLoadImage from "react-use-lazy-load-image";

export default function App() {
  useLazyLoadImage();

  return (
    <>
      <img
        src="https://placekitten.com/g/200/200"
        data-img-src="https://placekitten.com/g/600/600"
        alt="cat"
      />
    </>
  );
}

src has the URL of the placeholder image.

data-img-src has the lazy-loaded image.

useLazyLoadImage lets us do the lazy loading.

react-use-modal

The react-use-modal library lets us create a toggle to toggle our modal.

To install it, we run:

yarn add react-use-modal

or:

npm install react-use-modal --save

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { ModalProvider } from "react-use-modal";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  rootElement
);

App.js

import React from "react";
import { Modal } from "react-bootstrap";
import { useModal } from "react-use-modal";

export default function App() {
  const { showModal, closeModal } = useModal();

  function handleClick() {
    showModal(({ show }) => (
      <Modal show={show} onHide={closeModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body.</Modal.Body>
      </Modal>
    ));
  }

  return <button onClick={handleClick}>modal</button>;
}

We use the ModalProvider and wrap that in our app.

Then we can use the useModal in App to get an object with the showModal and closeModal functions.

showModal is used to render the modal.

We pass a function with the modal content.

closeModal lets us close the modal.

We use React Bootstrap to make creating the modal easier.

Conclusion

react-use-input lets us create inputs easily.

react-use-lazy-load-image lets us lazy load images.

react-use-modal is useful for letting us toggle modals.

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-use-id-hook

The react-use-id-hook library lets us create unique IDs easily within our React component.

We can install it by running:

npm i react-use-id-hook

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { IdProvider } from "react-use-id-hook";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <IdProvider>
    <App />
  </IdProvider>,
  rootElement
);

App.js

import React from "react";
import { useId } from "react-use-id-hook";

export default function App() {
  const id = useId();
  const [value, setValue] = React.useState();

  return (
    <form>
      <input
        id={id}
        type="checkbox"
        checked={value}
        onChange={ev => setValue(ev.target.checked)}
      />
      <label htmlFor={id}>Click me</label>
    </form>
  );
}

We use the useId hook to generate our ID.

Then we pass it into props or wherever we want to use it.

We’ve to remember to wrap our app with the IdProvider so we can use the hook.

react-use-idb

react-use-idb lets us use IndexDB to store our data without using the native library.

To install it, we run:

npm i react-use-idb

Then we can use it by writing:

import React from "react";
import { useIdb } from "react-use-idb";

export default function App() {
  const [value, setValue] = useIdb("key", "foo");

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue("bar")}>bar</button>
      <button onClick={() => setValue("baz")}>baz</button>
    </div>
  );
}

The useIdb hook takes a key and initial value.

It returns an array with the value and a function to set the value in this order.

Then we can use that as we did in the onClick handlers.

It takes one argument to set the data.

react-use-infinite-loader

The react-use-infinite-loader package lets us add infinite scrolling to our React app.

To install it, we run:

yarn add react-use-infinite-loader

Then we can use it by writing:

import React from "react";
import useInfiniteLoader from "react-use-infinite-loader";

export default function App() {
  const [canLoadMore, setCanLoadMore] = React.useState(true);
  const [data, setData] = React.useState([]);
  const loadMore = React.useCallback(() => {
    setTimeout(() => {
      setCanLoadMore(true);
      setData(currentData => [
        ...currentData,
        ...Array(20)
          .fill()
          .map((_, i) => i)
      ]);
    }, 1000);
  });
  const { loaderRef } = useInfiniteLoader({ loadMore, canLoadMore });

  return (
    <>
      {data.map(data => (
        <div>{data}</div>
      ))}
      <div ref={loaderRef} />
    </>
  );
}

We added the loadMore function to load our data,.

We put our data loading code in a callback so that the calls can be cached.

The data loading code just push more data into the data array.

Then we have the useInfiniteLoader to let us create a ref for the element to watch the for items to load.

The hook takes an object with the loadMore function to load more data.

canLoadMore tells the library whether we have more data to load.

We pass it into the div so that new data will load when we load the div.

Conclusion

The react-use-id-hook lets us create an ID in our React component.

react-use-idb is a library that lets us interact with the browser’s indexedDB database.

The react-use-infinite-loader library lets us add infinite scrolling to our React app.

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 Recipes

React Recipes comes with many hooks that we can use to do various things.

The useEventListener hook lets us listen to various events easily within our React component.

To use it, we can write:

import React, { useState, useCallback } from "react";
import { useEventListener } from "react-recipes";

export default function App() {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  const handler = useCallback(
    ({ clientX, clientY }) => {
      setCoords({ x: clientX, y: clientY });
    },
    [setCoords]
  );

  useEventListener("mousemove", handler);

  return (
    <p>
      The mouse position is ({coords.x}, {coords.y})
    </p>
  );
}

We use the useState hook to set the initial mouse coordinates.

Then we added a callback to the useCallback hook that’s used as the mousemove event listener.

Then we pass that handler to the useEventListener hook.

useEventListener takes an optional 3rd argument for the element to listen to.

The default value is window .

Then we get the mouse coordinates from the coords state.

useFullScreen is a gook that lets us determine and toggle if the screen or element is in full-screen mode.

We can use it by writing:

import React from "react";
import { useFullScreen } from "react-recipes";

export default function App() {
  const { fullScreen, toggle } = useFullScreen();

  return (
    <>
      <button onClick={toggle}>Toggle Full Screen</button>
      <p>{fullScreen.toString()}</p>
    </>
  );
}

We used the useFullScreen hook to return an object with the toggle function.

It lets us toggle full-screen mode.

It also returns the fullScreen property to indicate if the document is full screen.

open lets us open full-screen mode.

close lets us close full-screen mode.

The useGeolocation hook lets us get and watch the geolocation of a user.

To use it, we can write:

import React from "react";
import { useGeolocation } from "react-recipes";

export default function App() {
  const { latitude, longitude, timestamp, accuracy, error } = useGeolocation(
    true
  );

  return (
    <p>
      latitude: {latitude}
      longitude: {longitude}
      timestamp: {timestamp}
      accuracy: {accuracy && `${accuracy}m`}
      error: {error}
    </p>
  );
}

We use the useGeolocation with the argument true to indicate that we want to follow the location.

It also takes a second argument with some options.

We can enable high accuracy, set timeout, and set the max-age for caching.

It returns an object with the latitude, longitude, timestamp, accuracy, and error.

The useHover hook lets us know when the most is hovering over an element.

To use it, we can write:

import React from "react";
import { useHover } from "react-recipes";

export default function App() {
  const [hoverRef, isHovered] = useHover();

  return <div ref={hoverRef}>{isHovered.toString()}</div>;
}

We call the useHover hook in our component, which returns 2 things.

The hoverRef is a ref that we pass into the component we want to watch.

isHovered indicates whether we hovered over the element we’re watching.

Conclusion

React Recipes comes with hooks for helping us get geolocation data, watching hovering, toggling full screen, and more.

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 hookedUp

React hookedUp is a library with many hooks to make our lives easier.

To install it, we run:

npm install react-hookedup --save

or:

yarn add react-hookedup

The useInput hook lets us take care of value changes with one hook.

For instance, we can write:

import React from "react";
import { useInput } from "react-hookedup";

export default function App() {
  const newTodo = useInput("");

  return (
    <div>
      <input {...newTodo.bindToInput} />
      <input {...newTodo.bind} />
      <p>{newTodo.value}</p>
    </div>
  );
}

We have 2 inputs.

They both use a property from the newTodo object returned by useInput to let us handle input value changes.

bindToInput binds the value and onChange props to an input that has e.target.value .

bind binds the value and onChange props to an input that use e in onChange .

There’s also the clear method to clear the input value.

The useFocus hook lets us detect whether an element is in focus or not.

To use it, we can write:

import React from "react";
import { useFocus } from "react-hookedup";

export default function App() {
  const { focused, bind } = useFocus();

  return (
    <div>
      <input {...bind} />
      <p>{focused ? "focused" : "not focused"}</p>
    </div>
  );
}

The useFocus hook returns an object with the focused and bind properties.

The bind object passed into the input so that we can watch for the focus state of the input.

Then we can get the focus state with the focused property.

The useHover hook lets us watch for the hover state of an element.

We can use it by writing:

import React from "react";
import { useHover } from "react-hookedup";

export default function App() {
  const { hovered, bind } = useHover();

  return (
    <div>
      <p>{hovered ? "hovered" : "not hovered"}</p>
      <input {...bind} />
    </div>
  );
}

Like with useFocus , we pass the bind property to the input.

This way, we can watch whether the input is hovered on or not.

Then we can get the hover state with the hovered property.

The useArray hook lets us manage array state easily.

For instance, we can write:

import React from "react";
import { useArray } from "react-hookedup";

export default function App() {
  const { add, clear, removeIndex, value } = useArray(["foo", "bar"]);

  return (
    <div>
      <button onClick={() => add("qux")}>add</button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => removeIndex(value.length - 1)}>
        remove index
      </button>
      <p>{value.join(", ")}</p>
    </div>
  );
}

We use the useArray hook which returns takes an array for its initial value.

Then it returns an object with various properties we can use.

add lets us append an item to the array.

clear lets us empty the array.

removeIndex lets us remove an item by its index.

value has the array’s value.

It also returns the removeById property that lets us remove an item by ID.

For instance, we can write:

import React from "react";
import { useArray } from "react-hookedup";

export default function App() {
  const { add, clear, removeById, value } = useArray([
    { id: 1, name: "foo" },
    { id: 2, name: "baz" }
  ]);

  return (
    <div>
      <button onClick={() => add({ id: value.length + 1, name: "qux" })}>
        add
      </button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => removeById(value.length)}>remove by id</button>
      <p>{value.map(v => v.name).join(", ")}</p>
    </div>
  );
}

We have an array with entries that have the id property.

Then we can call removeById with the ID to remove the item by its ID.

Conclusion

React hookedUp has useful hooks for tracking hover, focus, and array states.

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.