{"_id":"@api18n/react","_rev":"2-63a90e6a63ad0eaadbdf1b9728b02e3e","name":"@api18n/react","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@api18n/react","version":"0.1.0","keywords":["api18n","i18n","internationalization","translations","localization","react","next","icu"],"author":{"name":"api18n"},"license":"MIT","_id":"@api18n/react@0.1.0","maintainers":[{"name":"npm-api18n","email":"api18n.app@gmail.com"}],"homepage":"https://github.com/api18n-app/api18n-sdk#readme","bugs":{"url":"https://github.com/api18n-app/api18n-sdk/issues"},"dist":{"shasum":"ef0ed674d9c65afb24aaed9d250b798aad054661","tarball":"https://registry.npmjs.org/@api18n/react/-/react-0.1.0.tgz","fileCount":13,"integrity":"sha512-jUZ8go/UK8f/SG/8nFtqHMS/h0m5gcK82gOiCQ4Aez4Jhp8WPeuvstRALjC+ka1njImzohuMOZ3bipbvykKjwQ==","signatures":[{"sig":"MEYCIQDvjvMjMcEJivTFD8NbM8EmueiYaEbN6+eFagFCk4yV9QIhAJqwAd2xu4JrV85DovtG3Ve+zXaEqJWjAJRUqyKnwmk1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46615},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./next":{"types":"./dist/next/index.d.ts","import":"./dist/next/index.js"},"./server":{"types":"./dist/server/index.d.ts","import":"./dist/server/index.js"}},"gitHead":"bb6072facaf2cefc0735902f3c832382bc062e5b","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.types-test.json","test:watch":"vitest","prepublishOnly":"bun run typecheck && bun run test && bun run build"},"_npmUser":{"name":"npm-api18n","email":"api18n.app@gmail.com"},"repository":{"url":"git+https://github.com/api18n-app/api18n-sdk.git","type":"git"},"_npmVersion":"11.6.4","description":"React + Next.js i18n runtime SDK for the api18n translation manager. One init file, typed keys, ICU plurals, rich tag interpolation.","directories":{},"_nodeVersion":"24.11.0","dependencies":{"intl-messageformat":"^10.7.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","vitest":"^2.1.5","happy-dom":"^15.11.7","react-dom":"^19.0.0","typescript":"^5.6.3","@types/node":"^22.10.0","@types/react":"^19.0.0","@vitejs/plugin-react":"^4.3.4","@testing-library/react":"^16.1.0"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1778552693076_0.764681056511","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@api18n/react","version":"0.1.1","description":"React + Next.js i18n runtime SDK for the api18n translation manager. One init file, typed keys, ICU plurals, rich tag interpolation.","license":"MIT","author":{"name":"api18n"},"homepage":"https://github.com/api18n-app/api18n-sdk#readme","repository":{"type":"git","url":"git+https://github.com/api18n-app/api18n-sdk.git"},"bugs":{"url":"https://github.com/api18n-app/api18n-sdk/issues"},"keywords":["api18n","i18n","internationalization","translations","localization","react","next","icu"],"publishConfig":{"access":"public"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./server":{"types":"./dist/server/index.d.ts","import":"./dist/server/index.js"},"./next":{"types":"./dist/next/index.d.ts","import":"./dist/next/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.types-test.json","test":"vitest run","test:watch":"vitest","prepublishOnly":"bun run typecheck && bun run test && bun run build"},"peerDependencies":{"react":">=18.0.0"},"dependencies":{"intl-messageformat":"^10.7.7"},"devDependencies":{"@testing-library/react":"^16.1.0","@types/node":"^22.10.0","@types/react":"^19.0.0","@vitejs/plugin-react":"^4.3.4","happy-dom":"^15.11.7","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.3.5","typescript":"^5.6.3","vitest":"^2.1.5"},"engines":{"node":">=18.0.0"},"gitHead":"29345b5a190f058c00c39fc2b7d4422e2916b7fd","_id":"@api18n/react@0.1.1","_nodeVersion":"24.11.0","_npmVersion":"11.6.4","dist":{"integrity":"sha512-GdqFWWQoJHRpk65oyvzQLUiXm5sGPy7io9Jrz6pi14WOElO0L7MLl7mBAry3tsWspBS8JTxanTeOnSB1uXzAgw==","shasum":"0936572e7e5ed60093754d3c7d68e7aebf01114d","tarball":"https://registry.npmjs.org/@api18n/react/-/react-0.1.1.tgz","fileCount":13,"unpackedSize":47001,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEebIy64wIkoymJ9N4GjZvYuqOJq0ta9wtMfxZE83tykAiARko7wjmeHHhKm71IkxPCkMxCnJ+SZSAbQvL9xsMG6Hw=="}]},"_npmUser":{"name":"npm-api18n","email":"api18n.app@gmail.com"},"directories":{},"maintainers":[{"name":"npm-api18n","email":"api18n.app@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.1_1778903905215_0.9511853900255616"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-12T02:24:52.999Z","modified":"2026-05-16T03:58:25.485Z","0.1.0":"2026-05-12T02:24:53.218Z","0.1.1":"2026-05-16T03:58:25.350Z"},"bugs":{"url":"https://github.com/api18n-app/api18n-sdk/issues"},"author":{"name":"api18n"},"license":"MIT","homepage":"https://github.com/api18n-app/api18n-sdk#readme","keywords":["api18n","i18n","internationalization","translations","localization","react","next","icu"],"repository":{"type":"git","url":"git+https://github.com/api18n-app/api18n-sdk.git"},"description":"React + Next.js i18n runtime SDK for the api18n translation manager. One init file, typed keys, ICU plurals, rich tag interpolation.","maintainers":[{"name":"npm-api18n","email":"api18n.app@gmail.com"}],"readme":"# @api18n/react\n\nReact + Next.js i18n runtime SDK for the [api18n](https://www.api18n.com)\ntranslation manager. One init file, typed keys, ICU plurals, rich tag\ninterpolation.\n\n## About api18n\n\n[api18n.com](https://www.api18n.com) is a hosted translation management\nplatform: invite translators, manage locales from a dashboard, sync keys\nto your repo via the GitHub App or the `@api18n/cli`, and ship typed\nmessages straight to this SDK. Sign up at\n[https://www.api18n.com](https://www.api18n.com) to get an account and\nstart pulling translations into your app.\n\n## Install\n\n```bash\nnpm install @api18n/react\n# or\nbun add @api18n/react\n```\n\nPair it with `@api18n/cli` for pulling translations from the dashboard:\n\n```bash\nnpm install --save-dev @api18n/cli\n```\n\n## Quick start\n\n```ts\n// src/api18n.ts\nimport { createApi18n } from '@api18n/react';\nimport en from './messages/en.json';\nimport ptBR from './messages/pt-BR.json';\n\nexport const api18n = createApi18n({\n  resources: { en, 'pt-BR': ptBR },\n  defaultLocale: 'en',\n  fallbackLocale: 'en',\n});\n```\n\n```tsx\n// src/main.tsx  — or  app/layout.tsx\nimport './api18n';\nimport { App } from './App';\n```\n\n```tsx\nimport { useTranslations } from '@api18n/react';\n\nexport function Home() {\n  const t = useTranslations();\n  return <h1>{t('welcome', { name: 'Eduardo' })}</h1>;\n}\n```\n\nNo Provider in JSX. The init call registers a singleton; `useTranslations`\nsubscribes via `useSyncExternalStore`.\n\n## Message format\n\nStrings use [ICU MessageFormat](https://formatjs.io/docs/core-concepts/icu-syntax/):\n\n```json\n{\n  \"welcome\": \"Hello {name}\",\n  \"cart\": {\n    \"items\": \"{count, plural, one {# item} other {# items}}\"\n  },\n  \"balance\": \"{amount, number, ::currency/USD}\",\n  \"placed\": \"Placed on {when, date, long}\",\n  \"agreement\": \"By signing up you agree to our <link>terms of service</link>\"\n}\n```\n\n```tsx\nt('cart.items', { count: 3 });           // → \"3 items\"\nt('balance', { amount: 1234.5 });        // → \"$1,234.50\"\nt('placed', { when: order.createdAt });  // → \"Placed on March 15, 2026\"\nt('agreement', {\n  link: (chunks) => <a href=\"/terms\">{chunks}</a>,\n});\n```\n\n## Locale switching\n\n```tsx\nimport { useLocale, setLocale } from '@api18n/react';\n\nfunction LocalePicker() {\n  const locale = useLocale();\n  return (\n    <select value={locale} onChange={(e) => setLocale(e.target.value)}>\n      <option value=\"en\">English</option>\n      <option value=\"pt-BR\">Português</option>\n    </select>\n  );\n}\n```\n\n`setLocale` is a plain function — call it from anywhere (event handlers,\nroute guards, even outside React).\n\n## Next.js App Router\n\nServer Components ship zero JS for translated strings — they render to plain\nHTML.\n\n```tsx\n// app/[locale]/layout.tsx\nimport { setRequestLocale } from '@api18n/react/server';\nimport '../api18n';\n\nexport default async function Layout({ children, params }) {\n  const { locale } = await params;\n  setRequestLocale(locale);\n  return <html lang={locale}><body>{children}</body></html>;\n}\n```\n\n```tsx\n// any Server Component\nimport { getTranslations } from '@api18n/react/server';\n\nexport default async function Page() {\n  const t = await getTranslations();\n  return <h1>{t('welcome', { name: 'Eduardo' })}</h1>;\n}\n```\n\nClient Components import from `'api18n'` as usual.\n\n## Type-safe keys\n\nWhen `@api18n/cli` pulls translations, it also writes\n`messages/messages.d.ts` augmenting the `Messages` interface. Once that file\nis included in your `tsconfig.json`:\n\n```tsx\nt('button.cancl');                    // ❌ TS error: key doesn't exist\nt('welcome');                         // ❌ TS error: missing arg `name`\nt('welcome', { name: 'Eduardo' });    // ✅\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}