Swap in your own React Context providers

As you add more and more Custom Components to your Admin Panel, you may find it helpful to add additional React Context(s) to your app. Payload allows you to inject your own context providers where you can export your own custom hooks, etc.

To add a Custom Provider, use the admin.components.providers property in your Payload Config:

1import { buildConfig } from 'payload'
2
3export default buildConfig({
4  // ...
5  admin: {
6    components: {
7      providers: ['/path/to/MyProvider'], 
8    },
9  },
10})

Then build your Custom Provider as follows:

1'use client'
2import React, { createContext, use } from 'react'
3
4const MyCustomContext = React.createContext(myCustomValue)
5
6export function MyProvider({ children }: { children: React.ReactNode }) {
7  return <MyCustomContext value={myCustomValue}>{children}</MyCustomContext>
8}
9
10export const useMyCustomContext = () => use(MyCustomContext)

For details on how to build Custom Components, see Building Custom Components.

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Swap in your own React Context providers

Customizing Views

Swap in your own React Context providers