Provider Setup

To use Grunfeld, you first need to set up the GrunfeldProvider at the top level of your application. This Provider is responsible for rendering and managing the state of dialogs.

Next.js App Router#

If you're using Next.js App Router, add the Provider to your layout file:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <GrunfeldProvider>
          {children}
        </GrunfeldProvider>
      </body>
    </html>
  );
}

Next.js Pages Router#

If you're using Pages Router, add the Provider to your _app.tsx file:

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

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

React (Vite, CRA)#

In a regular React application, add the Provider to your app's root component:

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

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

export default App;