Top React Hooks — Portal and Flux

Photo by Farhan Azam on Unsplash

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 Cool Portal

React Cool Portal lets us render our elements outside the usual DOM hierarchy determined by React.

To install it, we run:

yarn add react-cool-portal

or:

npm install --save react-cool-portal

Then we can use it by writing:

import React from "react";
import usePortal from "react-cool-portal";
export default function App() {
  const { Portal } = usePortal();
  return (
    <div>
      <Portal>
        <p>hello world </p>
      </Portal>
    </div>
  );
}

We called the usePortal hook to return the Portal component.

Then we can render our elements inside the Portal .

By default, the elements inside will be attached to the body.

We can add the ID of the container with the containerId .

If the element with the given ID doesn’t exist, it’ll create it for us.