---
id: react/api/components
title: Provider & Scopes
---

The three components: the provider that holds the instance, the scope that injects agreement params, and the fallback that covers boot.

## `StiftProvider`

```tsx
<StiftProvider stift={stift} boot={() => stift.initialize({ locale })} onBootError={report}>
```

Provides the `stift` instance and locale context to everything below it.

### `stift` prop

- Type: `Stift`
- Required. The instance from `createStift` or `createStiftApp`. Note the lowercase — it is the object, not the type.

### `boot` prop

- Type: `() => Promise<void>`
- Optional. The "load every non-excluded namespace for the resolved locale" operation that `<BootFallback>` suspends on — typically `() => stift.initialize({ locale })`. Started once, lazily. Omit it (and `<BootFallback>`) when booting imperatively in the client entry, as the examples do.

### `onBootError` prop

- Type: `(error: unknown) => void`
- Optional — `default: console.error`. Where a rejected `boot` promise reports. The boot gate releases either way: `<BootFallback>` renders children on reject too.

## `LocaleScope`

```tsx
<LocaleScope context={{ gender: user.gender }}>
```

### `context` prop

- Type: `Record<string, unknown>`
- Required. Params merged into every `t()` call in the subtree. Lexically scoped: a nested `<LocaleScope>` overrides only for its own subtree, and an explicit param at a call site always wins.

Read it back with `useLocale().context`. There is no setter — set it declaratively here, or imperatively per key with `setParam`.

## `BootFallback`

```tsx
<BootFallback fallback={<FullPageLoader />}>
  <App />
</BootFallback>
```

### `fallback` prop

- Type: `ReactNode`
- Required. Renders until the provider's `boot` promise settles (resolve or reject), then children — so components never mount against a pending locale switch. The fallback must not require translation. Without `boot`, passes through.

## Examples

```tsx
render(
  <StiftProvider stift={stift} boot={() => boot()}>
    <BootFallback fallback={<FullPageLoader />}>
      <LocaleScope context={{ gender: user.gender }}>
        <App />
      </LocaleScope>
    </BootFallback>
  </StiftProvider>,
)
```

## Next

- Booting outside the provider → [Setup & Boot Modes](../setup.md)
- Declaring the params scopes consume → [stift.config.ts](../../configuration/config-file.md)