Vulnerabilities in the latest react-localize-redux

[johnwen84]

Vulnerabilities in the latest react-localize-redux

[cristianoccazinsp]

It's a shame, but the library doesn't seem maintained anymore.

[johnwen84]

@cristianoccazinsp yea it sucks. I guess I'll have to find an alternative.

[cristianoccazinsp]

Let me know if you find any!

[jimmailcamp]

@ryandrewjohnson Any change you can update the package to fix these? Using this heavily in production

[cristianoccazinsp]

Bump!

[jimmailcamp]

Just switched to i18nreact. Def recommend it. You can opt out for the route prefixes easily.
Basicly just wrap the t function in i18n with your own component. And change every import statement where you used to use this package.
Worth the hassle, as it's very maintained unlike this shitshow.

[gerhardcit]

@jimmailcamp , any change you have some kind of sample that would help a non-react guy that have to fix a react system (get it running with vite)?

[jimmailcamp]

I've set it up for next.js and Cra.
Not much experience with vite. Tho I definitly recommend the switch to Next. The community is big, documentation is clear and out of the box compiling just works without any config whatsoever.

Even in CRA I used 'i18next'. Just follow the documentation and u should be good to go. Heres a start:
Works in CRA* & Next.js

App.js

Initialize initI18n() in a useEffect with empty deps array;

InitI18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

return i18n
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
react:{
transSupportBasicHtmlNodes: true,
transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'span']
},
debug:false,
fallbackLng: 'en',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},

        resources: {
            en: {
                ...
             
            },
            nl: {
             ...
            }
        }
    });

My own translation component that wraps i18n t method:

import React from 'react';
import {useTranslation} from 'react-i18next';

export const Translation = ({id, ...props}) => {
const {t} = useTranslation();
if (props.ns) return <>{t(id, {...props})}</>
return <>{t( id.replace(${id.split('.')[0]}., ''), {...props, ns : id.split('.')[0]})}</>
}

Hope this helps