Introducing Grunfeld

Grunfeld is a simple and intuitive dialog manager for React apps. With a small amount of code, you can implement modals, alerts, and confirmation dialogs without complex state management.

It supports synchronous alerts and Promise-based dialogs for user input, flexible 9-grid positioning, and a predictable LIFO stack. You can choose inline rendering or top-layer rendering with the native <dialog> element, and customize behavior and styling per dialog or globally via the Provider.

Installation#

Grunfeld can be installed in various ways:

install.sh

npm install @ilokesto/grunfeld
pnpm add @ilokesto/grunfeld
yarn add @ilokesto/grunfeld
bun add @ilokesto/grunfeld

Quick Start#

Add GrunfeldProvider at the top level of your app:

import { GrunfeldProvider } from "@ilokesto/grunfeld";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GrunfeldProvider>
      <Component {...pageProps} />
    </GrunfeldProvider>
  );
}

Basic Usage#

You can create a simple confirmation dialog and receive the user's response. The grunfeld.add() method returns a Promise, so you can use async/await to wait for the user's choice.

import { grunfeld } from "@ilokesto/grunfeld";

export default function YourComponent() {
  const showConfirmDialog = async () => {
    const result = await grunfeld.add<boolean>((removeWith) => ({
      element: (
        <div>
          <p>Are you sure you want to delete this?</p>
          <button onClick={() => removeWith(true)}>Confirm</button>
          <button onClick={() => removeWith(false)}>Cancel</button>
        </div>
      ),
      position: "center",
      dismissCallback: () => console.log("Dialog closed"),
    }));

    if (result) {
      console.log("User confirmed the action");
    } else {
      console.log("User canceled the action");
    }
  };

  return <button onClick={showConfirmDialog}>Open confirm dialog</button>;
}