# <TryYourSizeProvider>

> Creates (or adopts) the TryYourSize client and its elements group for the components inside it.

Source: https://docs.tryyoursize.com/reference/react/tryyoursize-provider/

*Component* · `@tryyoursize/react`

Creates (or adopts) the TryYourSize client and its elements group for the components inside it. Pass either `publishableKey` or `client`; it cannot change once set.

```ts
function TryYourSizeProvider(props: TryYourSizeProviderProps): ReactNode
```

## Props

- **`children`** (`ReactNode`, optional)
- **`options`** (`TryYourSizeProviderOptions`, optional)
  - **`embedOrigin`** (`string`, optional): Development override of our windows' origin (e.g. http://localhost:5173). Used with `publishableKey`.
  - **`apiOrigin`** (`string`, optional): Development override of the API origin (e.g. http://localhost:8000): the A/B holdout config.
  - **`locale`** (`Locale`, optional): Language of our windows; "auto" follows the browser.
  - **`appearance`** (`Appearance`, optional): Look and feel. Changes are applied live with `elements.update()`.
- **`publishableKey`** (`string`, optional): Either this or `client`. Your publishable key (`pk_test_…` / `pk_live_…`). The provider calls `TryYourSize()`.
- **`client`** (`TryYourSizeClient | Promise<TryYourSizeClient | null> | null`, optional): Either this or `publishableKey`. A client, a promise of one (for example `loadTryYourSize(pk)`), or `null` while you don't have one yet.

## Example

**React**

```tsx
// With a key
<TryYourSizeProvider publishableKey="pk_test_…" options={{ locale: "es" }}>
  <App />
</TryYourSizeProvider>

// With the CDN loader (SSR-safe)
const tysPromise = loadTryYourSize("pk_test_…");
<TryYourSizeProvider client={tysPromise}>
  <App />
</TryYourSizeProvider>
```

**JavaScript**

```js
// Without React
const tys = TryYourSize("pk_test_…", { locale: "es" });
const elements = tys.elements();
```