# Add custom React providers

This topic explains how to make your own React providers available on every page of your project by ejecting the `CustomContexts` component.
Use it to provide a component library theme, a query client, feature flags, or any other value your custom components read from React context.

The `RootLayout` renders `CustomContexts` around the navbar, the page content, and the footer.
By default the component renders its children unchanged, so ejecting it has no effect until you add your providers.
Eject the [`RootLayout`](/docs/platform/customization/eject-root-layout) only when you need to add an element to every page or change the element that wraps the page.

## Eject the `CustomContexts` component

**Redocly platform**

To eject the `CustomContexts` component in Redocly:

1. In the `Theme components` panel, navigate to the `layouts` folder.
2. Click the eject icon next to `CustomContexts.tsx`.

**CLI**

To eject the `CustomContexts` component locally, run the following command:

```bash
npx @redocly/cli eject component 'layouts/CustomContexts.tsx'
```

The Redocly platform and the CLI put the ejected component in the `@theme/layouts` folder.
It looks like the following:

```tsx
import React from 'react';

import type { JSX } from 'react';

type CustomContextsProps = React.PropsWithChildren<{}>;

// Eject this component to wrap every page in custom React context providers.
export function CustomContexts({ children }: CustomContextsProps): JSX.Element {
  return <>{children}</>;
}
```

## Add providers to the ejected component

Wrap `children` with the providers you need.
Keep the component name and the `children` prop, because the `RootLayout` renders the component with the page content as its children.

The following example provides a [TanStack Query](https://tanstack.com/query/latest) client to every page:

```tsx
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import type { JSX } from 'react';

const queryClient = new QueryClient();

export function CustomContexts({ children }: React.PropsWithChildren<{}>): JSX.Element {
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}
```

Any [React page](/docs/platform/customization/create-react-page), [Markdoc tag component](/docs/platform/customization/build-markdoc-tags), or other ejected component can then call `useQuery` from the library.

Install the library in your project before you import it.
Providers from other libraries, such as a component library `ThemeProvider`, work the same way.

## Resources

- **[Customize the root layout](/docs/platform/customization/eject-root-layout)** - Eject the `RootLayout` when you need to add an element to every page or change the element that wraps the page
- **[Import npm libraries](/docs/platform/customization/import-npm-library)** - Add third-party packages, such as component libraries, to your project
- **[Eject components](/docs/platform/customization/eject-components)** - Learn the fundamentals of ejecting and customizing built-in components
- **[Extend with code](/docs/platform/customization)** - Discover customizable components and customization options for your project