Swap in your own React Context providers

Custom Providers wrap the Admin Panel with your own React Context. Register them through admin.components.providers in your FrogBot config:

import { buildConfig } from 'frogbot'

export default buildConfig({
  admin: {
    components: {
      providers: ['/components/ReviewProvider#ReviewProvider'],
    },
  },
})

Then create the provider as a Client Component:

'use client'

import { createContext, use } from 'react'
import type { ReactNode } from 'react'

const ReviewContext = createContext({ enabled: true })

export function ReviewProvider({ children }: { children: ReactNode }) {
  return <ReviewContext value={{ enabled: true }}>{children}</ReviewContext>
}

export function useReview() {
  return use(ReviewContext)
}

See Building Custom Components for component path and client boundary details. Providers nest in array order, with the first entry outermost; providers is listed with the other root slots in Root Components.

React Context is available to Client Components. Keep server-only work in a Server Component and pass serializable values into the provider.

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Swap in your own React Context providers