useSay() is a React hook that retrieves the current ReadonlySay instance from the nearest SayProvider in the component tree.
This hook must be called within a component that is a descendant of SayProvider. It will throw an error if no provider is found. Import
import { useSay } from 'saykit/react';
Return Type
A frozen (read-only) Say instance that provides translation methods. The instance is bound to the locale and messages provided by the nearest SayProvider.
Usage
Basic translation
'use client';
import { useSay } from 'saykit/react';
export function WelcomeMessage() {
const say = useSay();
return (
<div>
<h1>{say('welcome.title')}</h1>
<p>{say('welcome.description')}</p>
</div>
);
}
With interpolation
'use client';
import { useSay } from 'saykit/react';
export function UserGreeting({ username }: { username: string }) {
const say = useSay();
return (
<p>{say('greeting.hello', { name: username })}</p>
);
}
With pluralization
'use client';
import { useSay } from 'saykit/react';
export function ItemCount({ count }: { count: number }) {
const say = useSay();
return (
<p>{say('items.count', { count })}</p>
);
}
Error Handling
If useSay() is called outside of a SayProvider, it will throw an error:
'use client';
import { useSay } from 'saykit/react';
// This will throw an error!
export function BrokenComponent() {
const say = useSay(); // Error: 'useSay' must be used within a 'SayProvider'
return <div>{say('some.key')}</div>;
}
Error: 'useSay' must be used within a 'SayProvider'
Proper setup
Always ensure your components using useSay() are wrapped with SayProvider:
'use client';
import { SayProvider, useSay } from 'saykit/react';
import messages from './locales/en.json';
function TranslatedComponent() {
const say = useSay(); // This works!
return <div>{say('some.key')}</div>;
}
export function App() {
return (
<SayProvider locale="en" messages={messages}>
<TranslatedComponent />
</SayProvider>
);
}
Type Definition
function useSay(): ReadonlySay;
See Also
SayProvider - The context provider that must wrap components using this hook- Say API - Core Say class documentation for available methods