https://github.com/significa/significa-react-i18n
Simple i18n library for React
https://github.com/significa/significa-react-i18n
Last synced: 10 months ago
JSON representation
Simple i18n library for React
- Host: GitHub
- URL: https://github.com/significa/significa-react-i18n
- Owner: significa
- Created: 2022-08-10T12:48:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-17T09:32:51.000Z (over 3 years ago)
- Last Synced: 2025-06-11T09:49:01.388Z (about 1 year ago)
- Language: TypeScript
- Size: 177 KB
- Stars: 2
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![React][React.js]][React-url]
A Zero dependency opinionated Significa's i18n package for React.
Table of Contents
## Usage
Include the provider on the top level of your app.
Pass the messages object based on the current language selected on your app.
```js
import { I18nProvider } from '@significa/react-i18n'
```
You can either use the `useTranslation` helper or the `Translation` component
```js
import { useTranslation } from '@significa/react-i18n'
const YourComponent = () => {
const { t } = useTranslation()
return (
{t('yourMessage')}
)
}
```
```js
import { Translation } from '@significa/react-i18n'
const YourComponent = () => {
return (
)
}
```
## Messages object
Your messages object should be according to the following example.
```
{
id: message,
anotherId: anotherMessage
}
```
## Message parameters
It's possible to add parameters to the message, a string between double curlybraces is represented as a parameter.
```js
// Messages Object
{
greet: "Hello {{name}}"
}
```
```js
OR
{t('greet', { name: user.name })}
```
## License
[MIT](https://github.com/Significa/significa-start/blob/master/LICENSE)
[](https://significa.co)
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/