ModalProvider

The provider component that renders all active modals.

Usage

Place ModalProvider at the root of your app:

tsx

import { ModalProvider } from "@hirotoshioi/hiraku";

function App() {
  return (
    <>
      <YourApp />
      <ModalProvider/>
    </>
  );
}

How It Works

ModalProvider:

Subscribes to the modal store
Renders all active modal instances
Wraps each modal with the appropriate Radix UI Root component
Handles open/close animations
Passes dismiss events back to the store

With Next.js App Router

tsx

// app/layout.tsx
import { ModalProvider } from "@hirotoshioi/hiraku";

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