Provider Options

GrunfeldProvider accepts an options prop to set global defaults. Individual dialogs can override these values.

Available Options#

All options configurable in the Provider:

• defaultPosition: Default position for all dialogs (default: 'center')
• defaultLightDismiss: Default value for backdrop click to dismiss (default: true)
• defaultRenderMode: Default rendering mode (default: 'inline')
• defaultBackdropStyle: Default backdrop styles

Usage Example#

Example applying consistent styles across the project:

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

function App() {
  return (
    <GrunfeldProvider
      options={{
        defaultPosition: "top-right",
        defaultLightDismiss: true,
        defaultRenderMode: "inline",
        defaultBackdropStyle: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          backdropFilter: "blur(5px)",
        },
      }}
    >
      <YourApp />
    </GrunfeldProvider>
  );
}

Individual Override#

Individual dialogs can override the Provider's defaults:

// This dialog ignores Provider settings and appears in top-right
grunfeld.add(() => ({
  element: <div>Important alert</div>,
  position: "top-right",
  lightDismiss: false,
}));

This dialog ignores the Provider's default settings and displays in the top-right corner without allowing backdrop click to dismiss.