How do I use vue.js mixin in react?

Question

On a daily basis I'm using vue.js but right now I'm working on a react project. I've got this translation method:

function __(key, replace = null) {
    let translation, translationNotFound = true;

    try {
        translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php);

        if (translation) {
            translationNotFound = false;
        }
    } catch (e) {
        translation = key;
    }

    if (translationNotFound) {
        translation = window._translations[window._locale]['json'][key]
            ? window._translations[window._locale]['json'][key]
            : key;
    }

    if (replace) {
        replace.forEach((value, key) => {
            translation = translation.replace(':' + key, value);
        });
    }

    return translation;
}

In vue I'm using a mixin for this so it can be used everywhere. How can I make sure I can use this method in my react components?

Already red lots of articles online but can't figure it out.

jeremy castelli · Accepted Answer · 2021-11-20 22:39:17Z

2

Just export your function

const myFunction = (key, replace = null) => {
    let translation, translationNotFound = true;

    try {
        translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php);

        if (translation) {
            translationNotFound = false;
        }
    } catch (e) {
        translation = key;
    }

    if (translationNotFound) {
        translation = window._translations[window._locale]['json'][key]
            ? window._translations[window._locale]['json'][key]
            : key;
    }

    if (replace) {
        replace.forEach((value, key) => {
            translation = translation.replace(':' + key, value);
        });
    }

    return translation;
}

export default myFunction;

When you want to import

import myFunction from 'path/to/the/file'

answered Nov 20, 2021 at 22:39

jeremy castelli

1,26011 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamie Over a year ago

Yes but then I've got to import it in all my components!

jeremy castelli Over a year ago

Personnally, I prefer importing everytime. In this article on the reactjs official blog reactjs.org/blog/2016/07/13/mixins-considered-harmful.html, they explain how to do mixins, why you should not use them and what to do instead

Collectives™ on Stack Overflow

How do I use vue.js mixin in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related