@pico-intl-dev/solid

SolidJS bindings for pico-intl.

Status: stable v1 for Solid apps covered by the published Solid + Vite adoption fixture. SolidStart-specific behavior is not part of the stable contract until a dedicated fixture lands.

Install

npm install @pico-intl-dev/core @pico-intl-dev/solid solid-js

Usage

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

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 Solid components | | useT() | Returns a reactive translate function | | useLocale() | Returns Solid locale, dir, isRTL accessors and setLocale() | | useExists() | Reactive key-existence checker | | useOrdinal() | Reactive ordinal translation helper | | useI18n() | Returns the raw PicoIntlInstance |

Production notes

• useT() reads the locale signal so JSX expressions re-evaluate on locale changes.
• App-level SSR/hydration should be validated in your SolidStart or custom SSR setup.

Verification

npm run build:all
npm run test:integration