CODEWITHSUNDEEP
javascriptreactjsvue.jsmixins
Jamie
Jamie

Reputation: 10886

How do I use vue.js mixin in react?

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.

Upvotes: 0

Views: 618

Answers (1)

jeremy castelli
jeremy castelli

Reputation: 1260

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'

Upvotes: 2

Related Questions