{"id":22123494,"url":"https://github.com/proai/intlized-components","last_synced_at":"2026-03-16T18:32:27.471Z","repository":{"id":57149176,"uuid":"102259213","full_name":"ProAI/intlized-components","owner":"ProAI","description":":earth_africa: React.js components for internationalization (i18n)","archived":false,"fork":false,"pushed_at":"2025-01-23T21:59:07.000Z","size":128,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T17:50:54.364Z","etag":null,"topics":["i18n","internationalization","intl","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProAI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-03T11:16:19.000Z","updated_at":"2025-01-23T21:37:15.000Z","dependencies_parsed_at":"2022-09-06T13:02:38.932Z","dependency_job_id":null,"html_url":"https://github.com/ProAI/intlized-components","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/ProAI/intlized-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Fintlized-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Fintlized-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Fintlized-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Fintlized-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProAI","download_url":"https://codeload.github.com/ProAI/intlized-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Fintlized-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265336610,"owners_count":23749193,"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","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":["i18n","internationalization","intl","react","redux"],"created_at":"2024-12-01T15:33:53.735Z","updated_at":"2026-03-16T18:32:27.421Z","avatar_url":"https://github.com/ProAI.png","language":"JavaScript","readme":"# Intlized Components\n\nThis package provides an easy way for internationalization support in React.js apps.\n\n## Problem\n\nIn many - but not all - cases language variables are tied to one component in React, but most i18n libraries do not fit into a component based approach.\n\n## Solution\n\nThis package solves this issue and helps you to define language messages component based by providing component based dictionaries. Also each prop of a component can be \"intlized\", so that it can be used with a language variable or with formatting (date time, number and time ago).\n\n## Installation\n\n```shell\nnpm install intlized-components\n# or\nyarn add intlized-components\n```\n\n## Examples\n\n### Translation Example\n\nThe most convient way to use intlized components is to create a local dictionary for every component, define intlized components and use the predefined `\u003cTrans\u003e` component. Basically with intlized components you can use any component as intlized component, just import the `intlized` function and wrap the component. But in most cases you need nothing more than the `\u003cTrans\u003e` component.\n\n```jsx\nimport React from 'react';\nimport { createDict, intlized, Trans } from 'intlized-components';\n\n// Create local dictionary: Define a scope, then define the messages with the default translation\nconst dict = createDict('RegistrationForm', {\n  welcome: 'Welcome {name}',\n  inputPlaceholder: 'Your name...',\n  imageAlt: 'This image was created on {date}',\n});\n\n// wrap components, intlize props\nconst IntlizedInput = intlized('input', ['placeholder']);\nconst IntlizedImage = intlized('img', ['alt']);\n\n// use defined messages\nexport default function() {\n  return (\n    \u003cdiv\u003e\n      {/* Basic translation with variable */}\n      \u003cTrans {...dict('welcome', { name: 'dude' })} /\u003e\n\n      {/* Intlized attribute placeholder */}\n      \u003cIntlizedInput placeholder={dict('inputPlaceholder')} /\u003e\n\n      {/* Intlized attribute with date formatting util */}\n      \u003cIntlizedImage\n        alt={({ dateTime }) =\u003e\n          dict('imageAlt', { date: dateTime('2017-07-07') })\n        }\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Formatting Example\n\nFurthermore you can format dates and numbers without intlized components:\n\n```jsx\nimport React from 'react';\nimport { DateTime, TimeAgo, Number } from 'intlized-components';\n\nexport default function({ name }) {\n  return (\n    \u003cdiv\u003e\n      \u003cDateTime value=\"2017-07-07\" /\u003e\n      \u003cTimeAgo value=\"2017-07-07\" /\u003e\n      \u003cNumber value={1000} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nNote that all formatting components use the `Intl` api which is supported by most browsers and also [Node.js](https://nodejs.org/api/intl.html). Only `Intl.RelativeTimeFormat` is relatively new and not widely supported, so we suggest to use a polyfill like [relative-time-format](https://github.com/catamphetamine/relative-time-format) for it.\n\n### Example with `useIntl` hook\n\nThis package provides a `useIntl` hook, which might be helpful in some use cases:\n\n```jsx\nimport React from 'react';\nimport { useIntl } from 'intlized-components';\n\nexport default function() {\n  const intl = useIntl();\n\n  if (intl.locale === 'en') {\n    return \u003cspan\u003eThis text is only visible if locale is set to English.\u003c/span\u003e;\n  } else {\n    return null;\n  }\n}\n```\n\n## Docs\n\n### `createDict`\n\n```javascript\ntype CreateDict = (scope: string, messages: { [string]: string }) =\u003e Messages;\n\ntype Messages = (key: string, variables?: Object) =\u003e Intlized$Message;\n```\n\n### `useIntl`\n\n```javascript\ntype useIntl = () =\u003e {\n  locale: string,\n  changeLocale(locale: string, messages: Object): void,\n  addMessages(messages: Object): void,\n  trans(...Intlized$Message): string,\n  dateTime(value: string | Date): string,\n  number(value: number): string,\n  timeAgo(value: string | Date): string,\n};\n```\n\n### `intlized`\n\n```javascript\ntype Intlized = (\n  Component: React$ElementType,\n  intlizedProps: Array\u003cstring\u003e,\n) =\u003e Intlized$Component;\n```\n\n### `\u003cTrans\u003e`\n\n```javascript\ntype Intlized$Trans = React$ComponentType\u003c{ ...Intlized$Message }\u003e;\n```\n\n### `\u003cDateTime\u003e`\n\n```javascript\ntype Intlized$DateTime = React$ComponentType\u003c{ value: string }\u003e;\n```\n\n### `\u003cTimeAgo\u003e`\n\n```javascript\ntype Intlized$TimeAgo = React$ComponentType\u003c{ value: string }\u003e;\n```\n\n### `\u003cNumber\u003e`\n\n```javascript\ntype Intlized$Number = React$ComponentType\u003c{ value: string }\u003e;\n```\n\n## Misc\n\n### Babel plugin\n\nThere is a babel plugin called [`babel-plugin-intlized-components`](https://github.com/ProAI/babel-plugin-intlized-components) that helps you to extract all defined messages from the component files and to easily create translation definition files.\n\n## License\n\nThis package is released under the [MIT License](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproai%2Fintlized-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproai%2Fintlized-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproai%2Fintlized-components/lists"}