Provider

Provider is the containing component that all other React Spectrum components are the children of. Used to set locale, theme, scale, toast position and provider, modal provider, and common props for children components. Providers can be nested.

Example#

<Provider isDisabled scale="large">
  <Button variant="primary">Button</Button>
</Provider>

<Provider isDisabled scale="large">
  <Button variant="primary">Button</Button>
</Provider>

<Provider
  isDisabled
  scale="large">
  <Button variant="primary">
    Button
  </Button>
</Provider>

Global settings#

Props such as colorScheme, locale, scale, and theme are applied to all children components, including nested Providers. The theme allows the definition of custom CSS variables for the colorScheme and scale prop values.

Color scheme and scale#

<Provider colorScheme="dark" scale="large">
  <Form margin="15px">
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div style={{'marginBottom': '15px'}}>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider colorScheme="dark" scale="large">
  <Form margin="15px">
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div style={{'marginBottom': '15px'}}>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider
  colorScheme="dark"
  scale="large">
  <Form margin="15px">
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div
      style={{
        marginBottom:
          '15px'
      }}>
      <Button variant="primary">
        Button
      </Button>
    </div>
  </Form>
</Provider>

Theme#

The Provider's theme is the CSS variables for colorScheme and scale values.

import {theme} from '@react-spectrum/theme-default';

<Provider theme={theme} colorScheme="dark" scale="large">
  <Form>
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

import {theme} from '@react-spectrum/theme-default';

<Provider theme={theme} colorScheme="dark" scale="large">
  <Form>
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

import {theme} from '@react-spectrum/theme-default';

<Provider
  theme={theme}
  colorScheme="dark"
  scale="large">
  <Form>
    <div>
      <TextField label="Email" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div>
      <Button variant="primary">
        Button
      </Button>
    </div>
  </Form>
</Provider>

Locale#

The locale prop can be set to specify a locale for children of the Provider. The default for the locale prop is based on the system/browser settings. The locale prop does not support nesting. It must be the same across the page and all lang/dir attributes in the dom must match. See this list of supported locales.

<Provider locale="en-US">
  <Form necessityIndicator="label">
    <div>
      <TextField label="email" />
    </div>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider locale="en-US">
  <Form necessityIndicator="label">
    <div>
      <TextField label="email" />
    </div>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider locale="en-US">
  <Form necessityIndicator="label">
    <div>
      <TextField label="email" />
    </div>
    <div>
      <Button variant="primary">
        Button
      </Button>
    </div>
  </Form>
</Provider>

Provider nesting#

Providers can be nested. The parent Provider passes its props down to the children Providers.

<Provider isDisabled scale="large">
  <Button variant="primary">Button</Button>
  <Provider isQuiet>
    <Button variant="primary">Button</Button>
  </Provider>
</Provider>

<Provider isDisabled scale="large">
  <Button variant="primary">Button</Button>
  <Provider isQuiet>
    <Button variant="primary">Button</Button>
  </Provider>
</Provider>

<Provider
  isDisabled
  scale="large">
  <Button variant="primary">
    Button
  </Button>
  <Provider isQuiet>
    <Button variant="primary">
      Button
    </Button>
  </Provider>
</Provider>

Children props#

As a convenience, Provider supports passing common props to all components within it. For example, an entire group of components could be disabled by setting isDisabled in one place rather than on each individual element. These props are isDisabled, isEmphasized, isQuiet, isReadOnly, isRequired, and validationState.

isEmphasized#

<Provider isEmphasized>
  <Form>
    <div>
      <TextField label="Email" placeholder="info@adobe.com" />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider isEmphasized>
  <Form>
    <div>
      <TextField
        label="Email"
        placeholder="info@adobe.com"
      />
    </div>
    <Checkbox>Checkbox Label</Checkbox>
    <div>
      <Button variant="primary">Button</Button>
    </div>
  </Form>
</Provider>

<Provider isEmphasized>
  <Form>
    <div>
      <TextField
        label="Email"
        placeholder="info@adobe.com"
      />
    </div>
    <Checkbox>
      Checkbox Label
    </Checkbox>
    <div>
      <Button variant="primary">
        Button
      </Button>
    </div>
  </Form>
</Provider>

Props#