Lightweight and performant fullscreen overlays using React portals

by React

React Portal Overlay

A lightweight and performant fullscreen overlay component using React portals to render anywhere you need them to.

View Demo View Github

Installation

npm i react-portal-overlay

Usage

See the API Docs for a full overview of props and options.

import React, { useState } from 'react';
import { Overlay } from 'react-portal-overlay';

export default () => {
  const [open, setOpen] = useState(false);

  return (
    <Overlay open={open} onClose={() => setOpen(false)}>
      <h1>My overlay</h1>
    </Overlay>
  );
};

GitHub