Hooks

useAdmin

The useAdmin hook provides access to IO information within the Next app.

import { useAdmin } from '@vtex/raccoon-next'
connect()
export function Example(props: Props) {
  const {
    token,
    account,
    workspace,
    locale,
    currency,
    devUrl,
    prodUrl,
    basePath,
    production,
  } = useAdmin()
  return <Component />
}

useNavigation

The useNavigation hook returns the navigate function, which allows you to navigate through pages within or outside your Next.js app while updating the browser history and the Raccoon Iframe.

import { useNavigation } from '@vtex/raccoon-next'
connect()
export function Example(props: Props) {
  const { navigate } = useNavigation()
  return (
    <>
      <Button
        onClick={() => {
          // This will navigate to `${tenant}.myvtex.com/${basePath}/about`
          // Use this option when you want to navigate to a page within your Next.js app.
          // Under the hood, the default option delegates the navigation to Next.js router,
          // after forwarding the navigation to Render first.
          navigate('/about')
        }}
      >
        Navigate to the page `/about` of your Next.js app
      </Button>
      <Button
        onClick={() => {
          // This will navigate to `${tenant}.myvtex.com/admin/orders`
          // Use this option when you want to navigate to a page outside your Next.js app,
          // for example, a page in the admin.
          // Under the hood, the `adminRelativeNavigation` delegates the navigation to Render.
          navigate('/admin/orders', { type: 'adminRelativeNavigation' })
        }}
      >
        Navigate to the admin orders module
      </Button>
    </>
  )
}

interface NavigateOptions {
  type: 'navigation' | 'adminRelativeNavigation'
}