martinandert / react-translate-component

A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
MIT License
322 stars 31 forks source link

Default translation value #8

Closed frg closed 9 years ago

frg commented 9 years ago

Hi,

Consider a case where a translation is not available for a particular language. Is it possible to make it default to a particular language like english?

Or at least is it possible to call a function if a translation is not available? So that for instance I can call my api to notify me if a translation has not been added yet.

Thanks in advance, Jean

frg commented 9 years ago

Sorry for the spam post found it in the counterpart repo (https://github.com/martinandert/counterpart#readme);

"fallback" would be the default attribute.

Thanks for your great work @martinandert

kwhitaker commented 8 years ago

@frg how did you get this working with the component? In our app, we're calling registerTranslation with our various locales, and the component just looks like <Translate content="some.key" />. Are you providing a fallback in the props for the component?

frg commented 8 years ago

@kwhitaker, just to give you a little background on my current implementation. I've always found that translations and localisation in general is hard so as a dev I tried to create a simple workflow. I create the normal site, using the translate component defining the key and fallback (what I assume the english site would look like).

<Translate content="site.home" fallback="Home" />

It's a bit of extra work creating a suitable key but it gets the job done. Then I have this "translation not found catch" where if the translation is not in the initial translation json that has been loaded it will call my api to create a translation record.

        counterpart.onTranslationNotFound(function(locale, key, fallback) {
            // send ajax  call to create translation
            $.post( 
                "/api/translation", 
                JSON.stringify([{ Alpha2Code: "", Code: key, Translation: fallback, Path: "site"                     }]),
                function( data ) { }, 
                "json"
            );

            // append temporary translation to locale json to avoid calling this again
            var newTranslation = {};
            newTranslation[key] = fallback;
            counterpart.registerTranslations(locale, newTranslation);
        });

Hope this helps. Let me know if you need more clarifications.

kwhitaker commented 8 years ago

@frg that explains it perfectly! Thanks so much. Also, it might be good to add the fallback prop to the documentation.

frg commented 8 years ago

@kwhitaker To be honest even though I agree with you that adding it into this repo's documentation would be helpful but it's technically not a feature from this react implementation of counterpart.

"To become a master craftsman we encourage you to also read Counterpart's README."

I missed this the first time too. I'm sure @martinandert would accept a pull request if you are willing to add it to the docs :)