AppProvider API

API reference docs for the React AppProvider component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { AppProvider } from '@toolpad/core/AppProvider';
// or
import { AppProvider } from '@toolpad/core';
import { NextAppProvider } from '@toolpad/core/nextjs'; // Next.js
import { ReactRouterAppProvider } from '@toolpad/core/react-router'; // React Router

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children*	node	-	The content of the app provider.
authentication	{ signIn: func, signOut: func }	null	Authentication methods.
branding	{ homeUrl?: string, logo?: node, title?: string }	null	Branding options for the app.
localeText	object	-	Locale text for components
navigation	Array<{ action?: node, children?: Array<object \| { kind: 'header', title: string } \| { kind: 'divider' }>, icon?: node, kind?: 'page', pattern?: string, segment?: string, title?: string } \| { kind: 'header', title: string } \| { kind: 'divider' }>	[]	Navigation definition for the app.
router	{ Link?: func, navigate: func, pathname: string, searchParams: URLSearchParams }	null	Router implementation used inside Toolpad components.
session	{ user?: { email?: string, id?: string, image?: string, name?: string } }	null	Session info about the current user.
theme	object	createTheme()	Theme or themes to be used by the app in light/dark mode. A CSS variables theme is recommended.
window	object	window	The window where the application is rendered. This is needed when rendering the app inside an iframe, for example.

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.