@telenko/react-localizer

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

    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 <IntlProvider locale={normalizeLocale(language)} messages={vocabulary}>
                {children}
            </IntlProvider>
    }

    export default CustomLoader;

    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 = () => (
        <CustomLocalizer>
            <SomeGuiPage/>
        </CustomLocalizer>
    )

using out-of-the-box component

    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 = () => (
        <Localizer localesPath='/translations'>
            <SomeGuiPage/>
        </Localizer>
    )

!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)