https://github.com/telenko/react-localizer
Useful component and hooks to build lazy loading based localization
https://github.com/telenko/react-localizer
Last synced: 10 months ago
JSON representation
Useful component and hooks to build lazy loading based localization
- Host: GitHub
- URL: https://github.com/telenko/react-localizer
- Owner: telenko
- License: mit
- Created: 2021-03-13T15:19:42.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-06T13:11:17.000Z (about 5 years ago)
- Last Synced: 2025-02-07T02:05:45.429Z (over 1 year ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-localizer
Useful component and hooks to build lazy loading based localization
# how it works?
Uses 'languagechange' API to detect browser language, then passes browser language into a loader.
# example with react-intl
```Typescript
import { useLocalization, normalizeLocale, VocabularyLoader } from '@telenko/react-localizer';
//you can use any other 3pp for rich declarative/imperative localization API
import { IntlProvider } from "react-intl";
const customLoader: VocabularyLoader = (lang: string) => {
return import(`../../../translations/${normalizeLocale(lang)}.json`);
};
const CustomLocalizer: React.FC = ({ children }) => {
const [language, vocabulary] = useLocalization(customLoader);
return
{children}
}
export default CustomLoader;
```
```TSX
import CustomLocalizer from '../somewhere/in/your/project/Localizer';
import SomeGuiPage from '../somewhere/in/your/project/SomeGuiPage';
//Some GUI page will be localized :)
const App: React.FC = () => (
)
```
# using out-of-the-box component
```Typescript
import Localizer from '@telenko/react-localizer/src/Localizer';
import SomeGuiPage from '../somewhere/in/your/project/SomeGuiPage';
//Some GUI page will be localized :)
const App: React.FC = () => (
)
```
!Note, **Localizer** component will try to fetch locales from 'localesPath' url. Resulting url will be built as following:
```Javascript
`${props.localesPath}/${langCode}.json`
```
If you want custom behavior (f.e. webpack import), use hook + own component instead (example above)