Skip to main content
SayProvider is a React context provider that makes a localized Say instance available to all descendant components in your component tree.
This is a client component that uses the 'use client' directive. It can only be used in client-side React code.

​
Import

import { SayProvider } from 'saykit/react';

​
Props

​
locale
string
required
The current locale code (e.g., 'en', 'fr', 'es').
​
messages
Say.Messages
required
The translation messages object for the current locale. This should contain all the translation keys and their corresponding values.
​
children
ReactNode
The child components that will have access to the Say instance via the useSay() hook.

​
Usage

Wrap your component tree with SayProvider to make translations available to all descendant components: 
'use client';

import { SayProvider } from 'saykit/react';
import messages from './locales/en.json';

export function App() {
  return (
    <SayProvider locale="en" messages={messages}>
      <YourComponents />
    </SayProvider>
  );
}

​
With dynamic locale switching

'use client';

import { SayProvider } from 'saykit/react';
import { useState } from 'react';
import enMessages from './locales/en.json';
import frMessages from './locales/fr.json';

const locales = {
  en: enMessages,
  fr: frMessages,
};

export function App() {
  const [locale, setLocale] = useState<'en' | 'fr'>('en');

  return (
    <SayProvider locale={locale} messages={locales[locale]}>
      <button onClick={() => setLocale(locale === 'en' ? 'fr' : 'en')}>
        Switch to {locale === 'en' ? 'French' : 'English'}
      </button>
      <YourComponents />
    </SayProvider>
  );
}

​
How it works

The SayProvider component:
  1. Creates a Say instance with the provided locale and messages
  2. Immediately loads and activates the locale
  3. Freezes the instance to create a ReadonlySay object
  4. Provides the instance via React Context to all descendant components
Components within the provider can access the Say instance using the useSay() hook.

​
Type Definition

function SayProvider(props: PropsWithChildren<{
  locale: string;
  messages: Say.Messages;
}>): JSX.Element;

Build docs developers (and LLMs) love

Get started for freeTalk to us