https://github.com/ossphilippines/r22n
ReactInternationalization (r22n)
https://github.com/ossphilippines/r22n
Last synced: 3 days ago
JSON representation
ReactInternationalization (r22n)
- Host: GitHub
- URL: https://github.com/ossphilippines/r22n
- Owner: OSSPhilippines
- License: mit
- Created: 2023-06-09T09:54:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-20T09:23:39.000Z (about 1 year ago)
- Last Synced: 2025-08-09T13:56:56.235Z (10 months ago)
- Language: TypeScript
- Size: 75.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactInternationalization (r22n)
A zero-configuration language translation interface for react written
in typescript.
## Why?
Another alternative solution is `react-i18next`.
But, I needed a very light weight expressive translator that I can
plugin any session handler and handles the ordering of phrases and
variables better.
## Install
```bash
$ npm install r22n
```
## Usage
Open `App.tsx` and add the `R22nProvider` component around the main
`Component`.
```jsx
import { R22nProvider } from 'r22n';
export default function App({ Component, pageProps }: AppProps) {
return (
);
};
```
Also add a default `language` and `translations` like the following.
Include `language` and `translations` in the `R22nProvider` props.
```jsx
import type { AppProps } from 'next/app';
import { R22nProvider } from 'r22n';
const language = 'klingon';
const translations = {
"Hello World": "qo' vIvan",
"%s User": "tera'ngan %s",
"Welcome %s": "yI'el %s",
"You are %s years old": "%s ben ghu'"
};
export default function App({ Component, pageProps }: AppProps) {
return (
);
};
```
Next in `index.tsx` import the `useLanguage` hook and the `Translate`
component. You can now translate phrases in the following ways.
```jsx
import { useLanguage, Translate } from 'r22n';
const Page = () => {
const { _, t } = useLanguage();
const name = 'Chris';
const role = 'Admin';
return (
Inline Tranlation
{_('Hello World')}
Inline Tranlation with Variables
{_('%s User', role)}
String Literal Translations
{t`Welcome ${name}`}
Translate Component
You are 22 years old
Translate Component with Variables
You are %s years old
);
};
export default Page;
```
Next, let's add a language switcher. First create a list of
languages and translations like the following.
```jsx
const languages: Record> = {
klingon: {
"Hello World": "qo' vIvan",
"%s User": "tera'ngan %s",
"Welcome %s": "yI'el %s",
"You are %s years old": "%s ben ghu'"
},
english: {
"Hello World": "Hello World",
"%s User": "%s User",
"Welcome %s": "Welcome %s",
"You are %s years old": "You are %s years old"
}
};
```
Create a handler for `changeLanguage` and add listeners in the rendered
component section like below.
```jsx
const Page = () => {
const { _, t, language, changeLanguage } = useLanguage();
const name = 'Chris';
const change = (language: string) => {
changeLanguage(language, languages[language]);
};
return (
change('english')}>
Change to English
change('klingon')}>
Change to Klingon
Inline Tranlation
{_('Hello World')}
Inline Tranlation with Variables
{_('%s User', role)}
String Literal Translations
{t`Welcome ${name}`}
Translate Component
You are 22 years old
);
};
```
## Contributing
Thanks for being an awesome developer! We are always looking for
contributors and sponsors. If your interested,
[contact us](https://github.com/OSSPhilippines) so we can discuss.
Clone this repo and run the following commands in the project folder.
```js
$ yarn
$ yarn build
```
Please follow the steps below to properly contribute to this repository.
> Do not commit code that is not related to a GitHub issue!
> Please tag all your commits with `[type]/[issue#]`.
> Please include the time it took per commit. ie. `1s` or `1h`.
1. Per issue on Github, you should create a branch. example: `[type]/[issue#]`
- Per feature you should create a feature branch. ie. `feature/1001`.
- Per bug you should create a fix branch. ie. `fix/1002`.
- Per task you should create a task branch. ie. `task/1003`
2. Commits need to reference the issue that is being worked on. example: `updated copy #1004` or `fixes #1005`
- It's also good to to add the amount of time to your commit message. example: `fixed button #1006 30m` or `built awsome feature #1007 16h`
3. When you are finished with your branch, you should create a pull request back to the `main` branch.
- Assign another developer to review your code.
- All contributors are expected to both write and review code.
- Ask [Dev lead](https://github.com/cblanquera) for assignments.