@telenko/react-localizer
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    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)

    Install

    npm i @telenko/react-localizer

    DownloadsWeekly Downloads

    4

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • andrii.telenko