App provider

A top level provider for the Design System.

Beta

New and ready to use. We'll provide comms and support for any major changes.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/app-provider`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/app-provider, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

AppProvider props

`children`
Required
Description	App content.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`defaultColorMode`
Description	Initial color mode.
Default	`"light"`
Type	`"light" \| "dark" \| "auto"`

`defaultTheme`
Description	Theme settings.
Type	`{ light?: "light" \| "dark" \| "light-increased-contrast" \| "light-future" \| "UNSAFE-test-light" \| "UNSAFE-test-dark" \| "dark-future" \| "dark-increased-contrast"; dark?: "light" \| ... 6 more ... \| "dark-increased-contrast"; ... 4 more ...; UNSAFE_themeOptions?: ThemeOptionsSchema; }`

`routerLinkComponent`
Description	A configured router link component.
Type	`React.ForwardRefExoticComponent<RouterLinkComponentProps<any> & React.RefAttributes<HTMLAnchorElement>>`

`UNSAFE_isThemingDisabled`
Description	Disables theming functionality. This is intended for use in apps with existing theming configuration that want to incrementally adopt AppProvider. @warning Use with caution. This prop will be removed in a future release.
Type	`boolean`

ThemeProvider props

`children`
Required
Description	No description.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`defaultColorMode`
Description	No description.
Default	`"auto"`
Type	`"light" \| "dark" \| "auto"`

`defaultTheme`
Description	No description.
Type	`{ light?: "light" \| "dark" \| "light-increased-contrast" \| "light-future" \| "UNSAFE-test-light" \| "UNSAFE-test-dark" \| "dark-future" \| "dark-increased-contrast"; dark?: "light" \| ... 6 more ... \| "dark-increased-contrast"; ... 4 more ...; UNSAFE_themeOptions?: ThemeOptionsSchema; }`

Was this page helpful?

We use this feedback to improve our documentation.