Top React Hooks — Portals and Redux

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.

useMiddleware

The react-usemiddleware hook lets us create a state with Redux middlewares.

To install it, we run:

npm install react-usemiddleware --save

or:

yarn add react-usemiddleware

Then we can use it by writing:

import React from "react";
import { createLogger } from "redux-logger";
import useMiddleware from "react-usemiddleware";

const logger = createLogger();
const middlewares = [logger];

const initState = {
  count: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = useMiddleware(reducer, initState, middlewares);
  return (
    <div className="App">
      <button onClick={() => dispatch({ type: "INCREMENT" })}>increment</button>
      <span>{state.count}</span>
    </div>
  );
}

We have the redux logger that we created with the createLogger function.

We also have the initState with the initial state.

And we created a reducer that’s the usual reducer format.

We pass in the reducer , initState , and middlewares in the useMiddleware hook.

It returns the state with the state from the Redux store and the dispatch function that lets us dispatch an action.

We have the state.count with our count state from the store.

react-useportal

The react-useportal package lets us create portals, which are elements that render outside their usual hierarchy.

To install it, we run:

yarn add react-useportal

or:

npm i -S react-useportal

Then we can use it by writing:

import React from "react";
import usePortal from "react-useportal";

export default function App() {
  const { Portal } = usePortal();

  return <Portal>hello world</Portal>;
}

We just return the Portal component by calling the usePortal hook.

Then we can pass in anything in there.

The items will be rendered in the body element.

We can also render the items inside in another element.

For instance, we can write:

import React from "react";
import usePortal from "react-useportal";

export default function App() {
  const { Portal } = usePortal({
    bindTo: document && document.getElementById("hello-world")
  });

  return <Portal>hello world</Portal>;
}

to render the items inside Portal in the element with ID hello-world .

We can also use states to render the portal dynamically.

For instance, we can write:

import React from "react";
import usePortal from "react-useportal";

export default function App() {
  const { openPortal, closePortal, isOpen, Portal } = usePortal();

  return (
    <>
      <button onClick={openPortal}>Open</button>
      {isOpen && (
        <Portal>
          <div>
            <button onClick={closePortal}>Close</button>
            <p>hello world</p>
          </div>
        </Portal>
      )}
    </>
  );
}

The usePortal hook returns an object with the variables.

The Portal is the portal.

isOpen checks whether the portal is attached or not.

openPortal is a function that set isOpen to true .

closePortal is a function that sets isOpen to false .

We can also press Esc to remove the portal.

This is handy for modals.

Conclusion

The useMiddleware hook lets us use Redux middlewares to our apps.

We can use react-useportal to add portals to our app.