React hooks for Verbaly: a thin layer (React 18/19) over the reactive core via useSyncExternalStore.

Preact works too, through preact/compat, with no extra package and no configuration of ours: the test suite runs a second time with React resolved to preact/compat (hooks, locale switching, <Trans> and server rendering), so this is measured, not assumed.

🚀 Install

pnpm add verbaly @verbaly/react

import { VerbalyProvider, useT, useLocale } from '@verbaly/react';
import { verbaly } from 'virtual:verbaly';

<VerbalyProvider instance={verbaly}>
  <App />
</VerbalyProvider>;

function Inbox() {
  const t = useT();
  return <p>{t('inbox', { count: 3 })}</p>;
}

✨ Rich text: <Trans>

Write the source text in place and the compiler extracts it (key, catalogs, props):

import { Trans } from '@verbaly/react';

// you write:
<Trans>Read the <a href="/terms">terms</a> before continuing</Trans>
// the compiler rewrites it to:
<Trans id="x7Ka9q2f" components={{ "a": <a href="/terms" /> }} />

Runtime-first still works: pass id (+ values/components) yourself and nothing is touched. Whitelisted phrasing tags in a message (<em>, <code>…) render as real elements, same whitelist as data-verbaly-rich (richTags overrides it); unknown tags unwrap to inert text. JSX whitespace rules apply: a line break between an element and text renders no space (use {' '}).

Named links without custom components; hrefs come from your code, never from messages (javascript: blocked):

// message: 'Read the <docs>guide</docs>'
<Trans id="cta" links={{ docs: { href: '/docs', target: '_blank', rel: 'noopener' } }} />

📖 Docs: https://verbaly-web.vercel.app/docs/frameworks/react

⚠️ Early development (0.x): API not stable yet.

License

MIT © Aron Soto