<OneAuxiliaLoaded>

The <OneAuxiliaLoaded> component guarantees that the OneAuxilia object has loaded and will be available under window.OneAuxilia. This allows you to wrap child components to access the OneAuxilia object without the need to check it exists.

Usage

App Router

app/layout.tsx
import { OneAuxiliaProvider, OneAuxiliaLoaded, OneAuxiliaLoading } from '@oneauxilia/nextjs'
import './globals.css'

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

Once you have wrapped your app with , you can access the OneAuxilia object without the need to check if it exists.

app/page.tsx
declare global {
  interface Window {
    OneAuxilia: any
  }
}

export default function Home() {
  return <div>This page uses OneAuxilia {window.OneAuxilia.version}; </div>
}

Pages Router

pages/_app.tsx
import '@/styles/globals.css'
import { OneAuxiliaLoaded, OneAuxiliaProvider } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider {...pageProps}>
      <OneAuxiliaLoaded>
        <Component {...pageProps} />
      </OneAuxiliaLoaded>
    </OneAuxiliaProvider>
  )
}

export default MyApp

Once you have wrapped your app with , you can access the OneAuxilia object without the need to check if it exists.

pages/index.tsx
declare global {
  interface Window {
    OneAuxilia: any
  }
}

export default function Home() {
  return <div>This page uses OneAuxilia {window.OneAuxilia.version}; </div>
}

Last updated