Add custom React providers to the Root Layout

This topic explains how to add your own React providers to the RootLayout. This is useful if you want to add a custom context provider to your app, for example, to provide a theme, query client, or other providers.

The ejected component is placed in the @theme/layouts folder.

You are free to edit the component as you see fit. Make sure to keep the same component name.

You can also wrap the component with your own providers without changing the original component.

To do this import the RootLayout with a different name in your RootLayout.tsx.

import React from 'react';
import { RootLayout as OriginalRootLayout } from '@redocly/theme/layouts/RootLayout';

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

const queryClient = new QueryClient();

export function RootLayout(props) {
  return (
    <QueryClientProvider client={queryClient}>
      <OriginalRootLayout {...props} />
    </QueryClientProvider>
  );
}

• Component ejection guide - Learn the fundamentals of ejecting and customizing built-in components before tackling root layout customization
• Customization - Discover customizable components and customization options for your project