# Swap in your own React Context providers

Source: https://payloadcms.com/docs/beta/custom-components/custom-providers

As you add more and more [Custom Components](/docs/v4/custom-components/overview.md) to your [Admin Panel](/docs/v4/admin/overview.md), 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](/docs/v4/configuration/overview.md):

```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](/docs/v4/custom-components/overview.md#building-custom-components)._

> **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.