Tiqa / redux-polyglot

Polyglot.js bindings for Redux
MIT License
58 stars 13 forks source link

add 'polyglotScope' prop to translated component. #36

Open guillaumearm opened 7 years ago

guillaumearm commented 7 years ago

need #35.

can set a polyglotScope with a prop:

const TranslatedDummy = translate(Dummy);
// <TranslatedDummy polyglotScope="my.super.scope" />
JalilArfaoui commented 7 years ago

What is the use case for this ?

guillaumearm commented 7 years ago

hmm, i will write an example for this soon.

guillaumearm commented 7 years ago

I think it's more dynamic using react props, we can as well use translate({ defaultPolyglotScope: 'super.scope' }) according to #35.

here an example.

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { translate } from 'redux-polyglot/translate';
// soon : import translate from 'react-redux-polyglot';
import { getCurrentBiz } from '../selectors';

const DummyTitle = ({ p }) => <p>{ p.tc('title') }</p>

const connectTranslated = compose(
    connect(state => ({ polyglotScope: `catalog.${getCurrentBiz(state)}` }))
    translate(), // according to #48
);
const TranslatedDummyTitle = connectTranslated(DummyTitle);

// with this phrases loaded :
const phrases = {
    catalog: {
        hotel: {
            title: 'Hotel lists'
        },
        fly: {
            title: 'Fly lists'
        }
    }
};
// then, just simply render TranslatedDummyTitle without any props.
JalilArfaoui commented 7 years ago

I'm not convinced about the reality of use case in real life ... but why not