<TryYourSizeProvider>

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.

function TryYourSizeProvider(props: TryYourSizeProviderProps): ReactNode

Props

childrenReactNodeOptional

optionsTryYourSizeProviderOptionsOptional

Properties

embedOriginstringOptional

Development override of our windows' origin (e.g. http://localhost:5173). Used with publishableKey.

apiOriginstringOptional

Development override of the API origin (e.g. http://localhost:8000): the A/B holdout config.

localeLocaleOptional

Language of our windows; "auto" follows the browser.

appearanceAppearanceOptional

Look and feel. Changes are applied live with elements.update().

publishableKeystringOptional

Either this or client. Your publishable key (pk_test_… / pk_live_…). The provider calls TryYourSize().

clientTryYourSizeClient | Promise<TryYourSizeClient | null> | nullOptional

Either this or publishableKey. A client, a promise of one (for example loadTryYourSize(pk)), or null while you don't have one yet.

Example

ReactJavaScript

// 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>

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