<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>
}

app.tsx

import { useEffect } from 'react'
import { OneAuxiliaLoaded, OneAuxiliaProvider } from '@oneauxilia/oneauxilia-react'

declare global {
  interface Window {
    OneAuxilia: any
  }
}

function App() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <OneAuxiliaLoaded>
        <Page />
      </OneAuxiliaLoaded>
    </OneAuxiliaProvider>
  )
}

function Page() {
  useEffect(() => {
    // no need to check if window.OneAuxilia exists
    document.title = 'This page uses OneAuxilia ' + window.OneAuxilia.version
  }, [])

  return <div>The content </div>
}

export default App

routes/index.tsx

import { OneAuxiliaLoaded } from '@oneauxilia/remix'

export default function Index() {
  return (
    <div>
      <OneAuxiliaLoaded>
        <div>OneAuxilia is loaded</div>
        <p>window.OneAuxilia.version</p>
      </OneAuxiliaLoaded>
    </div>
  )
}

Previous<AuthenticateWithRedirectCallback />Next<OneAuxiliaLoading>

Last updated 6 months ago

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>
}

app.tsx

import { useEffect } from 'react'
import { OneAuxiliaLoaded, OneAuxiliaProvider } from '@oneauxilia/oneauxilia-react'

declare global {
  interface Window {
    OneAuxilia: any
  }
}

function App() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <OneAuxiliaLoaded>
        <Page />
      </OneAuxiliaLoaded>
    </OneAuxiliaProvider>
  )
}

function Page() {
  useEffect(() => {
    // no need to check if window.OneAuxilia exists
    document.title = 'This page uses OneAuxilia ' + window.OneAuxilia.version
  }, [])

  return <div>The content </div>
}

export default App

routes/index.tsx

import { OneAuxiliaLoaded } from '@oneauxilia/remix'

export default function Index() {
  return (
    <div>
      <OneAuxiliaLoaded>
        <div>OneAuxilia is loaded</div>
        <p>window.OneAuxilia.version</p>
      </OneAuxiliaLoaded>
    </div>
  )
}