Skip to content

AppProvider API

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

Demos

Import

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

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

Props

Props of the native component are also available.

NameTypeDefaultDescription
children*node-

The content of the app provider.

authentication{ signIn: func, signOut: func }null

Authentication methods.

branding{ logo?: node, title?: string }null

Branding options for the app.

navigationArray<{ 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{ 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.

themeobjectcreateTheme()

Theme or themes to be used by the app in light/dark mode. A CSS variables theme is recommended.

windowobjectwindow

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.