Dialog Patterns

Grunfeld supports various dialog patterns. Each pattern is optimized for specific use cases.

Alert#

A simple alert that conveys information to the user. It has no return value and provides only a confirmation button.

grunfeld.add(() => (
  <div>
    <p>Task completed successfully!</p>
    <button onClick={() => grunfeld.remove()}>OK</button>
  </div>
));

Confirm#

Used when a user decision is required. Typically returns a boolean value.

const confirmed = await grunfeld.add<boolean>((removeWith) => ({
  element: (
    <div>
      <p>Are you sure you want to delete this?</p>
      <button onClick={() => removeWith(true)}>Delete</button>
      <button onClick={() => removeWith(false)}>Cancel</button>
    </div>
  ),
}));

if (confirmed) {
  // Proceed with deletion
}

Prompt#

Receives text input from the user. Returns the entered string.

const name = await grunfeld.add<string>((removeWith) => ({
  element: (
    <div>
      <h3>Enter your name</h3>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            removeWith(e.currentTarget.value);
          }
        }}
      />
      <button onClick={(e) => {
        const input = e.currentTarget.previousElementSibling as HTMLInputElement;
        removeWith(input.value);
      }}>
        OK
      </button>
    </div>
  ),
}));

console.log("Entered name:", name);

Custom Dialog#

Use custom components when complex UI or multi-step interaction is required.

interface FormData {
  email: string;
  password: string;
}

const data = await grunfeld.add<FormData>((removeWith) => ({
  element: <CustomLoginForm onSubmit={removeWith} />,
  position: "center",
  lightDismiss: false,
}));

if (data) {
  // Handle login
  await login(data.email, data.password);
}