355bd12c61
As of [React 19](https://react.dev/blog/2024/12/05/react-19), context providers no longer require the `<MyContext.Provider>` syntax and can be rendered as `<MyContext>` directly. This will be deprecated in future versions of React, which is now being caught by the [`@eslint-react/no-context-provider`](https://eslint-react.xyz/docs/rules/no-context-provider) ESLint rule. Similarly, the [`use`](https://react.dev/reference/react/use) API is now preferred over `useContext` because it is more flexible, for example they can be called within loops and conditional statements. See the [`@eslint-react/no-use-context`](https://eslint-react.xyz/docs/rules/no-use-context) ESLint rule for more details.
50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
---
|
|
title: Swap in your own React Context providers
|
|
label: Custom Providers
|
|
order: 30
|
|
desc:
|
|
keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
As you add more and more [Custom Components](./overview) to your [Admin Panel](../admin/overview), you may find it helpful to add additional [React Context](https://react.dev/learn/scaling-up-with-reducer-and-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](../configuration/overview):
|
|
|
|
```ts
|
|
import { buildConfig } from 'payload'
|
|
|
|
export default buildConfig({
|
|
// ...
|
|
admin: {
|
|
components: {
|
|
providers: ['/path/to/MyProvider'], // highlight-line
|
|
},
|
|
},
|
|
})
|
|
```
|
|
|
|
Then build your Custom Provider as follows:
|
|
|
|
```tsx
|
|
'use client'
|
|
import React, { createContext, use } from 'react'
|
|
|
|
const MyCustomContext = React.createContext(myCustomValue)
|
|
|
|
export function MyProvider({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<MyCustomContext value={myCustomValue}>
|
|
{children}
|
|
</MyCustomContext>
|
|
)
|
|
}
|
|
|
|
export const useMyCustomContext = () => use(MyCustomContext)
|
|
```
|
|
|
|
_For details on how to build Custom Components, see [Building Custom Components](./overview#building-custom-components)._
|
|
|
|
<Banner type="warning">
|
|
**Reminder:** React Context exists only within Client Components. This means they must include the `use client` directive at the top of their files and cannot contain server-only code. To use a Server Component here, simply _wrap_ your Client Component with it.
|
|
</Banner>
|