https://github.com/jonirinta-kahila/localization-react
Easy package that allows localization with React
https://github.com/jonirinta-kahila/localization-react
localization npm npm-package react reactjs typescript
Last synced: about 2 months ago
JSON representation
Easy package that allows localization with React
- Host: GitHub
- URL: https://github.com/jonirinta-kahila/localization-react
- Owner: JoniRinta-Kahila
- License: apache-2.0
- Created: 2021-05-20T12:00:00.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T15:30:30.000Z (over 3 years ago)
- Last Synced: 2025-06-25T21:05:35.457Z (12 months ago)
- Topics: localization, npm, npm-package, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/localization-react
- Size: 3.08 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-localization
`npm i localization-react`
## languages.ts
```ts
// add supported languages here
const Languages = {
FI: 'fi',
EN: 'en',
}
export default Languages;
```
## locales.json
```json
{
"EN": {
"home": {
"string_1": "Hello, World!",
"string_2": "This is English."
}
},
"FI": {
"home": {
"string_1": "Hei, Maailma!",
"string_2": "Tämä on Suomea."
}
}
}
```
## app.tsx
```ts
import React from 'react';
import LocalizationContextProvider from 'localization-react';
import Languages from './localization/languages';
import LanguageSwitch from './localization/LanguageSwitch';
import Home from './home';
const App: React.FC = () => {
return (
)
}
export default App;
```
## Home.tsx, translated page
```ts
import React from 'react';
import { Translator, useLocalization } from 'localization-react';
import localesJson from './localization/locales.json';
const Home: React.FC = () => {
const localization = useLocalization();
const translator = new Translator(localesJson, 'home', localization.language);
return (
{translator.getLocaleString('string_1')}
{translator.getLocaleString('string_2')}
)
}
export default Home;
```
## languageSwitch.tsx, switch between languages
```ts
import React from 'react';
import { useLocalization } from 'localization-react';
const LanguageSwitch: React.FC = () => {
const localization = useLocalization();
const radioHandler = (event: React.ChangeEvent) => {
console.log(event.target.value)
localization.selectLanguage(event.target.value);
};
return (
English
Finnish
)
}
export default LanguageSwitch;
```