Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plaidev/react-i18n
The most simplest internationalization library for react.
https://github.com/plaidev/react-i18n
Last synced: about 1 month ago
JSON representation
The most simplest internationalization library for react.
- Host: GitHub
- URL: https://github.com/plaidev/react-i18n
- Owner: plaidev
- Created: 2022-10-25T07:48:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T11:16:01.000Z (over 1 year ago)
- Last Synced: 2024-10-08T18:24:47.694Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 102 KB
- Stars: 3
- Watchers: 25
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @plaidev/react-i18n
The most simplest type-safe internationalization library for react.
## Getting started
@plaidev/react-i18n can be installed using npm or yarn:
```
# npm
npm install -S @plaidev/react-i18n
# yarn
yarn add @plaidev/react-i18n
```
### Example
Firstly, react-i18n can be used to declare `I18nProvider` at the root of your react app.
```tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import { I18nProvider, browser, ignorePlaceCode } from '@plaidev/react-i18n';
const main = () => {
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
);
}
main();
```
Then, you can use resource of a locale by using `useTranslation`.
```tsx
import { useTranslation } from '@plaidev/react-i18n';
export const App = () => {
const t = useTranslation({
pt: {
message: 'bom dia!',
},
en: {
message: 'hello!',
},
});
return
{t.message}
}
```
## Translations
### Basic
```tsx
import { useTranslation } from '@plaidev/react-i18n';
export const Hello = () => {
const translated = useTranslation({
ja: {
hello: 'こんにちは',
world: '世界',
},
en: {
hello: 'hello',
world: 'world',
}
});
return
{translated.hello} {translated.world}
}
```
### Inline Translation
```tsx
import { useInlineTranslation } from '@plaidev/react-i18n';
export const Hello = () => {
const translated = useInlineTranslation();
return
{translated({ en: 'Hello', ja: 'こんにちは' })} {/* "Hello" or "こんにちは" */}
}
```
### Interpolation
```tsx
import { useTranslation } from '@plaidev/react-i18n';
const Hello = () => {
const { message } = useTranslation({
ja: {
message({ name }: { name: string }) {
return `こんにちは、${name}！`
}
},
en: {
message({ name }: { name: string }) {
return `Hello, ${name}!`
}
}
});
return
{message({ name: 'John' })}
}
```
### Singluar / Plurals
```tsx
import { useTranslation } from '@plaidev/react-i18n';
const Hello = () => {
const t = useTranslation({
en: ({ count }: { count: number }) => {
switch (true) {
case (x === 0):
return 'zero'
case (x === 1):
return 'one'
case (x <= 10):
return "few"
default:
return "many"
}
}
})
return
{t(5)}
}
```
### Formatting
@plaidev/react-i18n supports formatter hooks that wrap [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl).
```ts
import {
useCurrencyFormat,
useNumberFormat,
useDateTimeFormat,
useRelativeTimeFormat,
useListFormat,
usePluralRules,
useTranslation,
} from '@plaidev/react-i18n';
const Hello = () => {
const currency = useCurrencyFormat();
const howMuchMessage = useTranslation({
en: (howMuch: number) => {
return `This is ${currency(howMuch, 'USD')}`;
}
});
return
{howMuchMessage(100)}
}
```
## Detectors
### Cookie Detector
`cookie` detector detects locale from document.cookie
```tsx
import {
I18nProvider,
cookie,
} from '@plaidev/react-i18n';
```
### Browser Detector
`browser` detector detects locale from `window.navigator`.
```tsx
import {
I18nProvider,
browser,
} from '@plaidev/react-i18n';
```
### Ignore Place Code
`ignorePlaceCode` ignores a place code from a detected locale.
e.g) ja-JP -> ja
```tsx
import {
I18nProvider,
browser,
ignorePlaceCode,
} from '@plaidev/react-i18n';
```
### Force to select a specific locale
`forcedLocale` detect a specific locale that specified by an argument.
```tsx
import {
I18nProvider,
forcedLocale,
} from '@plaidev/react-i18n';
```
## Other hooks
@plaidev/react-i18n supports the locale setter and the locale getter hooks.
```tsx
import {
useLocaleSetting,
useLocaleSettingValue,
useSetLocaleSetting,
} from '@plaidev/react-i18n';
export const Example1 = () => {
const [{ locale }, { setLocale }] = useLocaleSetting();
return setLocale('en')}>{locale}
}
export const Example2 = () => {
const { locale } = useLocaleSettingValue();
return {locale}
}
export const Example3 = () => {
const { setLocale } = useSetLocaleSetting();
return setLocale('en')}>en
}
```