Basic Usage

Grunfeld provides two main usage patterns: simple alerts and dialogs that receive user responses. Each pattern is implemented using different overloads.

Alert Dialogs#

Using a factory function without parameters creates a simple alert. This approach returns void and executes synchronously.

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

function MyComponent() {
  const showAlert = () => {
    // Simple alert - returns void
    grunfeld.add(() => (
      <div>
        <p>Hello!</p>
        <button onClick={() => grunfeld.remove()}>OK</button>
      </div>
    ));
  };

  return <button onClick={showAlert}>Show Alert</button>;
}

Confirmation Dialogs#

Confirmation dialogs that wait for user selection receive the removeWith function as a parameter. Call this function to close the dialog and return a result value.

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

function MyComponent() {
  const showConfirm = 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>
      ),
    }));

    if (result) {
      console.log("User clicked confirm");
    } else {
      console.log("User clicked cancel");
    }
  };

  return <button onClick={showConfirm}>Confirmation Dialog</button>;
}

Input Dialogs#

Dialogs that receive data input from users follow the same pattern. Create an input component and pass the value through removeWith.

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

const InputDialog = ({ onClose }: { onClose: (name: string) => void }) => {
  const [name, setName] = useState("");

  return (
    <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
      <h3>Enter your name</h3>
      <input
        autoFocus
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        onKeyDown={(e) =>
          e.key === "Enter" && name.trim() && onClose(name.trim())
        }
      />
      <div>
        <button
          onClick={() => name.trim() && onClose(name.trim())}
          disabled={!name.trim()}
        >
          OK
        </button>
        <button onClick={() => onClose("")}>Cancel</button>
      </div>
    </div>
  );
};

function MyComponent() {
  const showInput = async () => {
    const input = await grunfeld.add<string>((removeWith) => ({
      element: <InputDialog onClose={removeWith} />,
    }));

    if (input) {
      console.log("Input value:", input);
    } else {
      console.log("Canceled");
    }
  };

  return <button onClick={showInput}>Input Dialog</button>;
}