{"id":17859183,"url":"https://github.com/loveholidays/phrasebook","last_synced_at":"2025-10-07T22:09:50.389Z","repository":{"id":42063664,"uuid":"476292314","full_name":"loveholidays/phrasebook","owner":"loveholidays","description":"A significantly smaller drop in replacement for react-i18next","archived":false,"fork":false,"pushed_at":"2025-02-11T02:19:37.000Z","size":1648,"stargazers_count":75,"open_issues_count":1,"forks_count":3,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-09-04T01:49:39.979Z","etag":null,"topics":["i18next","react","react-i18next","translation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loveholidays.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-31T12:18:27.000Z","updated_at":"2025-09-03T20:17:14.000Z","dependencies_parsed_at":"2024-11-04T17:24:16.346Z","dependency_job_id":"c88a4569-397c-4edf-8357-191f3dbcb976","html_url":"https://github.com/loveholidays/phrasebook","commit_stats":{"total_commits":29,"total_committers":4,"mean_commits":7.25,"dds":0.3793103448275862,"last_synced_commit":"c8e9a014ed1e16cc596d6da95bd8dc0a3704d2da"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/loveholidays/phrasebook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loveholidays%2Fphrasebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loveholidays%2Fphrasebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loveholidays%2Fphrasebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loveholidays%2Fphrasebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loveholidays","download_url":"https://codeload.github.com/loveholidays/phrasebook/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loveholidays%2Fphrasebook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278241170,"owners_count":25954376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18next","react","react-i18next","translation"],"created_at":"2024-10-28T06:03:23.705Z","updated_at":"2025-10-07T22:09:50.335Z","avatar_url":"https://github.com/loveholidays.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phrasebook\n\nA lightweight translation library for React/Preact projects with a similar interface to `react-i18next`.\n\nMade with ❤️ by [loveholidays.com](https://www.loveholidays.com)\n\n## Why phrasebook?\n\n- Tree-shakeable\n- Similar interface to `react-i18next`\n- Native ESM module with TypeScript type definitions\n- Small bundle size (~1kb)\n\nThis package exports native [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and does not provide a CommonJS export.\n\n## Bundle size comparisons\n\n| Package                  | Bundle size (gzip)                                                 | Difference |\n| ------------------------ | ------------------------------------------------------------------ | ---------- |\n| @loveholidays/phrasebook | [1.1kb](https://bundlephobia.com/package/@loveholidays/phrasebook) | baseline   |\n| @lingui/react@4.11       | [1.4kb](https://bundlephobia.com/package/@lingui/react@4.11.4)     | + 27%      |\n| react-i18next@15.0       | [5.3kb](https://bundlephobia.com/package/react-i18next@15.0.2)     | + 482%     |\n\n## Installation\n\nCurrently available on [NPM](https://www.npmjs.com/package/@loveholidays/phrasebook):\n\n```\n$ npm i -S @loveholidays/phrasebook\n- or -\n$ yarn add @loveholidays/phrasebook\n```\n\n## Using a dev version of Phrasebook in a dev app\n\nWe can use yalc for this, which creates a local store that we can publish and pull dependencies from.\n\nTo publish Phrasebook to the local store:\n\n```bash\nnpx --yes yalc publish\n```\n\nIn your target repo (eg. sunrise), update the dependency to local Phrasebook:\n\n```bash\nnpx yalc add @loveholidays/phrasebook\n```\n\nIf you make a change in your local Phrasebook repo, update the local store and the target repo:\n\n```bash\nnpx yalc publish --push\n```\n\nTo reset the dependency of Phraseboook, in your target repo run:\n\n```bash\nnpx yalc remove @loveholidays/phrasebook\n```\n\n## Usage\n\nUse the `TranslationProvider` to create the localisation context:\n\n```tsx\nimport { TranslationProvider } from '@loveholidays/phrasebook';\n\nconst App = () =\u003e (\n  \u003cTranslationProvider\n    locale=\"en-gb\"\n    translations={translations}\n    onError={(errorType, data) =\u003e {\n      const { key, argumentName } = data;\n    }}\n  \u003e\n    // ...\n  \u003c/TranslationProvider\u003e\n);\n```\n\nThe `locale` string is used for locale specific number formatting.\nThe `translations` object follows a format similar to the i18next JSON format [with some exceptions](#differences-to-i18next).\n\nUse the `useTranslation` hook to access the translation function:\n\n```tsx\nimport { useTranslation } from '@loveholidays/phrasebook';\n\nconst MyComponent = () =\u003e {\n  const { t } = useTranslation();\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003e{t('helloWorld')}\u003c/h1\u003e\n      \u003ch2\u003e{t('welcomeBack', { name: 'David' })}\u003c/h2\u003e\n      \u003cp\u003e{t('youHaveXNewMessages', { count: 14 })}\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nUse the `Translation` component to embed React components into the translations (similar to the [Trans component](https://react.i18next.com/latest/trans-component) of `react-i18next`):\n\n```tsx\nimport { Translation } from '@loveholidays/phrasebook';\n\nconst MyComponent = () =\u003e (\n  \u003cp\u003e\n    \u003cTranslation\n      translationKey=\"myKey\" // \"Read all the {count} reviews \u003c1\u003ehere\u003c/1\u003e, served by: \u003c2\u003e\"\n      params={{\n        count: 1234,\n      }}\n      components={[\n        (text) =\u003e \u003ca href=\"/#\"\u003e{text}\u003c/a\u003e, // text between \u003c1\u003e and \u003c/1\u003e is passed in as a param\n        \u003cimg src=\"logo.svg\" /\u003e,\n      ]}\n    /\u003e\n  \u003c/p\u003e\n);\n\n// result: \u003cp\u003eRead all the 1234 reviews \u003ca href=\"/#\"\u003ehere\u003c/a\u003e, served by: \u003cimg src=\"logo.svg\" /\u003e\u003c/p\u003e\n```\n\n## Differences to i18next\n\nThe goal is to provide a lightweight alternative for the most common used features of `react-i18next`, although phrasebook won't ever be 100% compatible with that.\n\n- There is no support for [translation backends](https://www.i18next.com/how-to/add-or-load-translations#combined-with-a-backend-plugin), the translation object must be loaded and passed in to the `TranslationProvider`.\n- The translation object format is not fully compatible with the [i18next JSON format](https://www.i18next.com/misc/json-format), the currently supported features are: nested translations, `_plural` suffix, [contexts](https://www.i18next.com/translation-function/context#basic).\n\n## Namespaces\n\nNamespaced translations can be used with `\u003cTranslationProvider /\u003e` by passing an object into the `namespaces` prop - where the keys are the names of the namespaces and the values are the translations for the given namespace:\n\n```tsx\n\u003cTranslationProvider\n  locale={locale}\n  namespaces={{\n    homepage: {\n      title: 'Homepage',\n    },\n    checkout: {\n      title: 'Checkout',\n    },\n  }}\n\u003e\n```\n\nThe `ns` option controls the namespace when using the `t` function:\n\n```tsx\nconst { t } = useTranslation();\n\nconst homepageTitle = t('title', { ns: 'homepage' });\nconst checkoutTitle = t('title', { ns: 'checkout' });\n```\n\nTo avoid repeating the `ns` option when using `t`, the default namespace can be changed when using the `useTranslation` hook:\n\n```tsx\nconst { t } = useTranslation('homepage');\n\nconst homepageTitle = t('title');\nconst checkoutTitle = t('title', { namespace: 'checkout' });\n```\n\nThe `Translation` component takes an optional `namespace` prop to achieve the same:\n\n```tsx\n  \u003cTranslation\n    translationKey=\"myKey\"\n    namespace=\"myNamespace\"\n    params={ ... }\n    components={ ... }\n  /\u003e\n```\n\n## i18n ally extension support for VS Code\n\nWe highly recommend to use the [i18n ally](https://github.com/lokalise/i18n-ally) extension for VS Code users. To make it work with phrasebook you need to add this file to your project:\n\n```yaml\n# .vscode/i18n-ally-custom-framework.yml\n\nlanguageIds:\n  - javascript\n  - typescript\n  - javascriptreact\n  - typescriptreact\nusageMatchRegex:\n  - \"[^\\\\w\\\\d]t\\\\(['\\\"`]({key})['\\\"`]\"\nmonopoly: false\n```\n\n## Contributing\n\nPlease see our [contributing guidelines](./CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floveholidays%2Fphrasebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floveholidays%2Fphrasebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floveholidays%2Fphrasebook/lists"}