Overlays

React library for rendering overlays.

Overview

Overlays is a simple library that facilitates the creation of overlays in React without using portals.

Features

• Simple, easy to use API
• Doesn't require React portals
• CSS agnostic

Usage

import { Overlay, OverlayProvider, OverlayRoot } from "overlays";

function MyHomePage() {
  return (
    <OverlayProvider>
      <main>
        <h1>Hello World!</h1>
        <section>
          <p>Page content</p>
          <Overlay>
            <p key="myOverlay">Overlay content</p>
          </Overlay>
        </section>
        <OverlayRoot />
      </main>
    </OverlayProvider>
  );
}

function MyAboutPage() {
  return (
    <OverlayProvider>
      <main>
        <h1>About Us!</h1>
        <section>
          <p>Page content</p>
          <Overlay scope="modal">
            <p>Modal content</p>
          </Overlay>
          <Overlay scope="alert">
            <p key="first">First alert</p>
          </Overlay>
          <Overlay scope="alert">
            <p key="second">Second alert</p>
          </Overlay>
        </section>
        <OverlayRoot scope="modal" />
        <OverlayRoot scope="alert"  />
      </main>
    </OverlayProvider>
  );
}

Installation

Node.js via npm

npm i overlays

Node.js via Yarn

yarn add overlays

License

Copyright © 2020 Morris Allison III. Released under the MIT license.