@saykit/react

@saykit/react is split across three entry points:

import { Say } from '@saykit/react'; // shared (server + client)
import { SayProvider, useSay } from '@saykit/react/client'; // client only
import { setSay, getSay, unstable_createWithSay } from '@saykit/react/server'; // server only

The default @saykit/react import uses the react-server export condition to swap between the server and client implementations of <Say> automatically.

@saykit/react

<Say>

The primary translation component. Author content as children.

<Say>Hello, {name}!</Say>

Props:

<Say> is a macro, the build-tool plugin reads the JSX, extracts the message, and rewrites the element to render say.call(...).

<Say.Plural>

<Say.Plural _={count} one="1 item" other="# items" />

Props:

<Say.Ordinal>

<Say.Ordinal _={position} _1="1st" _2="2nd" _3="3rd" other="#th" />

Same props as <Say.Plural>, CLDR plural categories plus exact-number branches.

<Say.Select>

<Say.Select _={gender} male="He liked it" female="She liked it" other="They liked it" />

Props:

@saykit/react/client

<SayProvider>

Wraps a client tree with a locale and message catalogue. Required before any client-side use of <Say> or useSay().

<SayProvider locale={locale} messages={messages}>
  {children}
</SayProvider>

Props:

Internally constructs a frozen Say scoped to the locale.

useSay()

Returns the frozen Say from the nearest <SayProvider>. Throws if no provider is in the tree.

function fn() {
  const say = useSay();
  return say`Hello, ${name}!`;
}

@saykit/react/server

setSay(say)

Register a Say instance for the current request. Must be called before any server component renders <Say>.

setSay(activeSayInstance);
setSay(() => buildSayInstance()); // also accepts a thunk

The instance is cloned and frozen on registration, mutations to the original after this call don't leak in.

getSay()

Returns the registered Say for the current request. Throws if none has been registered.

const say = getSay();

The server equivalent of useSay().

unstable_createWithSay(say)

Returns a withSay() higher-order component factory bound to a Say instance.

const withSay = unstable_createWithSay(say);

withSay(Component, getLocale):

The wrapper runs match(), load(), activate(), and setSay() before rendering. Useful in App Router layouts and pages where the URL param dictates the locale.

Types

PropsWithSay<P>

type PropsWithSay<P = unknown> = P & { locale: string; messages: Say.Messages };

The shape withSay-wrapped components receive.

Next

• Integration guide: usage patterns
• Vite (unplugin): the build-tool plugin
• Babel: for React Native, Expo, and other Babel pipelines