> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerfi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# LayerProvider context

All Layer React components are nested under the `LayerProvider` component. This component takes in the below properties.

```tsx theme={null}
import { LayerProvider, SupportedLocale } from "@layerfi/components";

<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environment={'sandbox'}
  locale={SupportedLocale.enUS}
  onError={error => {
    console.error('Layer error:', error)
  }}
  eventCallbacks={{
    onTransactionCategorized: () => {
      console.log('Transaction categorized')
    },
  }}
>
  {...}
</LayerProvider>
```

### Properties

<ParamField body="businessId" required="true" type="string">
  The ID of the business whose information you're showing.
</ParamField>

<ParamField body="businessAccessToken" required="true" type="string">
  Temporary authentication token scoped to this specific business. See the getting started guide for how to fetch these tokens on your backend.
  <Info>Do not use your Layer API key as the token in production. Retrieve a business-scoped access token from the Layer API and pass that value here instead.</Info>
</ParamField>

<ParamField body="environment" type="'production' | 'sandbox'">
  The predefined Layer environment to connect to. Defaults to `production`. Use `sandbox` for development and testing. Cannot be used together with `environmentConfigOverride`.
</ParamField>

<ParamField body="environmentConfigOverride" type="EnvironmentConfigOverride">
  Custom configuration to override API and auth endpoints. Use this instead of `environment` when connecting to a non-standard deployment. Cannot be used together with `environment`.

  <Expandable title="EnvironmentConfigOverride properties">
    <ParamField body="environment" required="true" type="'production' | 'sandbox'">
      Base environment name.
    </ParamField>

    <ParamField body="apiUrl" required="true" type="string">
      Custom API base URL (e.g., `https://custom-api.example.com`).
    </ParamField>

    <ParamField body="authUrl" required="true" type="string">
      Custom OAuth token endpoint (e.g., `https://custom-auth.example.com/token`).
    </ParamField>

    <ParamField body="scope" required="true" type="string">
      OAuth scope for the token request.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="locale" type="SupportedLocale" default="SupportedLocale.enUS">
  Sets the locale for all Layer components. Controls the language used for UI text, date formatting, numerical formatting, and the `Layer-Locale` header sent with API requests. Defaults to `SupportedLocale.enUS`.

  The `SupportedLocale` enum is exported from `@layerfi/components` and currently includes:

  * `SupportedLocale.enUS` (`'en-US'`) — English (United States)
  * `SupportedLocale.frCA` (`'fr-CA'`) — French (Canada)
</ParamField>

<ParamField body="theme" type="LayerThemeConfig">
  Customizes the look and feel of the components. See [Styling](/embedded-components/styling) for details.

  <Expandable title="LayerThemeConfig properties">
    <ParamField body="colors" type="LayerThemeConfigColors">
      <Expandable title="LayerThemeConfigColors properties">
        <ParamField body="dark" type="ColorConfig">
          Dark/primary color. Can be specified as HSL (`{ h, s, l }`), RGB (`{ r, g, b }`), or hex (`{ hex }`).
        </ParamField>

        <ParamField body="light" type="ColorConfig">
          Light/accent color. Can be specified as HSL, RGB, or hex.
        </ParamField>

        <ParamField body="text" type="ColorConfig">
          Text color. Can be specified as HSL, RGB, or hex.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="usePlaidSandbox" type="boolean">
  Overrides whether Plaid sandbox mode is used for bank account linking. Useful for testing.
</ParamField>

<ParamField body="onError" type="(error: LayerError) => void">
  Callback to be notified about exceptions within the components. The `LayerError` object contains `type` (e.g., `'unauthenticated'`, `'api'`, `'render'`), `scope`, and `payload`.
</ParamField>

<ParamField body="eventCallbacks" type="EventCallbacks">
  Callbacks that will be triggered for specific user events within the components.

  <Expandable title="EventCallbacks properties">
    <ParamField body="onTransactionCategorized" type="() => void">
      Callback triggered any time a transaction is categorized, matched, updated, etc.
    </ParamField>

    <ParamField body="onTransactionsFetched" type="() => void">
      Callback triggered when new transactions are fetched.
    </ParamField>
  </Expandable>
</ParamField>

### Environment Configuration

There are two mutually exclusive ways to configure the Layer environment:

**Predefined environment:**

```tsx theme={null}
<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environment="sandbox"
>
  {...}
</LayerProvider>
```

**Custom URL override:**

```tsx theme={null}
<LayerProvider
  businessId="<layer_business_id>"
  businessAccessToken="<access_token>"
  environmentConfigOverride={{
    environment: 'sandbox',
    apiUrl: 'https://custom-api.example.com',
    authUrl: 'https://custom-auth.example.com/token',
    scope: 'https://sandbox.layerfi.com/sandbox'
  }}
>
  {...}
</LayerProvider>
```