Getting Started

Stapel is an unopinionated modal handling library for React.

Install

yarn add stapel

Add the Stacker to your app

It is recommended to add the Stacker component to your root layout, e.g. layout.tsx.

import { Stacker } from "stapel";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Stacker />
      </body>
    </html>
  );
}

Render a modal

import { modal } from "stapel";
 
function MyComponent() {
  // ...
 
  return (
    <button
      onClick={() =>
        modal.open(() => (
          <div>
            <h1>My first modal!</h1>
            <button onClick={() => modal.close()}>Close modal</button>
          </div>
        ))
      }
    >
      Open modal
    </button>
  );
}

Stacker