@pico-intl-dev/react

React bindings for pico-intl.

Status: stable v1. Covered by SSR integration tests, hydration checks, release gates, and an independent npm-installed React + Vite adoption app.

Install

npm install @pico-intl-dev/core @pico-intl-dev/react

Usage

import { createI18n } from '@pico-intl-dev/core';
import { PicoIntlProvider, useLocale, useT } from '@pico-intl-dev/react';

const i18n = createI18n({
  base: 'en',
  locale: 'en',
  messages: { greeting: 'Hello, {{name}}' },
});

function Greeting() {
  const t = useT();
  const { dir, locale, setLocale } = useLocale();

  return (
    <>
      <h1 dir={dir} lang={locale}>{t('greeting', { name: 'Ana' })}</h1>
      <button onClick={() => setLocale(locale === 'en' ? 'es' : 'en')}>Switch</button>
    </>
  );
}

export function App() {
  return (
    <PicoIntlProvider i18n={i18n}>
      <Greeting />
    </PicoIntlProvider>
  );
}

API

| Export | Purpose | | --- | --- | | PicoIntlProvider | Provides the i18n instance to React components | | useT() | Returns a reactive translate function | | useTJsx() | Rich-text translation helper for flat tag maps | | useLocale() | Returns current locale, setLocale(), dir, and isRTL | | useI18n() | Returns the raw PicoIntlInstance | | LocaleLoader, PicoIntlSuspense | Suspense helpers |

Production notes

• Hooks must run under PicoIntlProvider.
• useTJsx() is intentionally simple: keep rich-text translation tags flat.
• SSR is tested in this repo; app-level hydration should be tested with your router/data-loading setup.

Verification

npm run build:all
npm run test:integration