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:
1
import { buildConfig } from 'payload'
2
3
export 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'
2
import React, { createContext, useContext } from 'react'
3
4
const MyCustomContext = React.createContext(myCustomValue)
5
6
export function MyProvider({ children }: { children: React.ReactNode }) {
7
return (
8
<MyCustomContext.Provider value={myCustomValue}>
9
{children}
10
</MyCustomContext.Provider>
11
)
12
}
13
14
export const useMyCustomContext = () => useContext(MyCustomContext)
For details on how to build Custom Components, see Building Custom Components.
Next