https://github.com/proai/intlized-components
:earth_africa: React.js components for internationalization (i18n)
https://github.com/proai/intlized-components
i18n internationalization intl react redux
Last synced: 8 months ago
JSON representation
:earth_africa: React.js components for internationalization (i18n)
- Host: GitHub
- URL: https://github.com/proai/intlized-components
- Owner: ProAI
- License: mit
- Created: 2017-09-03T11:16:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T21:59:07.000Z (about 1 year ago)
- Last Synced: 2025-07-07T17:50:54.364Z (8 months ago)
- Topics: i18n, internationalization, intl, react, redux
- Language: JavaScript
- Homepage:
- Size: 125 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Intlized Components
This package provides an easy way for internationalization support in React.js apps.
## Problem
In 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.
## Solution
This 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).
## Installation
```shell
npm install intlized-components
# or
yarn add intlized-components
```
## Examples
### Translation Example
The most convient way to use intlized components is to create a local dictionary for every component, define intlized components and use the predefined `` 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 `` component.
```jsx
import React from 'react';
import { createDict, intlized, Trans } from 'intlized-components';
// Create local dictionary: Define a scope, then define the messages with the default translation
const dict = createDict('RegistrationForm', {
welcome: 'Welcome {name}',
inputPlaceholder: 'Your name...',
imageAlt: 'This image was created on {date}',
});
// wrap components, intlize props
const IntlizedInput = intlized('input', ['placeholder']);
const IntlizedImage = intlized('img', ['alt']);
// use defined messages
export default function() {
return (
{/* Basic translation with variable */}
{/* Intlized attribute placeholder */}
{/* Intlized attribute with date formatting util */}
dict('imageAlt', { date: dateTime('2017-07-07') })
}
/>
);
}
```
### Formatting Example
Furthermore you can format dates and numbers without intlized components:
```jsx
import React from 'react';
import { DateTime, TimeAgo, Number } from 'intlized-components';
export default function({ name }) {
return (
);
}
```
Note 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.
### Example with `useIntl` hook
This package provides a `useIntl` hook, which might be helpful in some use cases:
```jsx
import React from 'react';
import { useIntl } from 'intlized-components';
export default function() {
const intl = useIntl();
if (intl.locale === 'en') {
return This text is only visible if locale is set to English.;
} else {
return null;
}
}
```
## Docs
### `createDict`
```javascript
type CreateDict = (scope: string, messages: { [string]: string }) => Messages;
type Messages = (key: string, variables?: Object) => Intlized$Message;
```
### `useIntl`
```javascript
type useIntl = () => {
locale: string,
changeLocale(locale: string, messages: Object): void,
addMessages(messages: Object): void,
trans(...Intlized$Message): string,
dateTime(value: string | Date): string,
number(value: number): string,
timeAgo(value: string | Date): string,
};
```
### `intlized`
```javascript
type Intlized = (
Component: React$ElementType,
intlizedProps: Array,
) => Intlized$Component;
```
### ``
```javascript
type Intlized$Trans = React$ComponentType<{ ...Intlized$Message }>;
```
### ``
```javascript
type Intlized$DateTime = React$ComponentType<{ value: string }>;
```
### ``
```javascript
type Intlized$TimeAgo = React$ComponentType<{ value: string }>;
```
### ``
```javascript
type Intlized$Number = React$ComponentType<{ value: string }>;
```
## Misc
### Babel plugin
There 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.
## License
This package is released under the [MIT License](LICENSE).