Nutritious Pumpkin Masses

    redux-pagan

    0.2.0 • Public • Published

    redux-pagan

    managing internationalization via redux

    (see react-pagan demo)

    Setup redux store

    Include i18n reducer in redux:

    import { i18n } from 'redux-pagan';
     
    const createStoreWithMiddleware = applyMiddleware(
      thunk
    )(createStore);
     
    const rootReducer = combineReducers({
      i18n
    });
     
    const store = createStoreWithMiddleware(rootReducer);
    ...

    Loading lang data

    import { loadLang } from 'redux-pagan';
     
    function getLangData(locale) {
      // here we use promise-loader to load lang data by demand
      return require('promise?global,[name].i18n!json!./i18n/' + locale + '.i18n.json');
    }
     
    @connect(...)
    class App extends Component {
      componentDidMount() {
        this.props.dispatch(loadLang(cookie.get('lang') || 'en-US', getLangData));
      }
      
      render() {
        return (
          <select onChange={this.handleLocaleChange}
                  value={this.props.locale}>
            <option value='en-US'>en-US</option>
            <option value='ru-RU'>ru-RU</option>
            <option value='fi-FI'>fi-FI</option>
          </select>
        );
      }
      
      handleLocaleChange = e => {
        this.props.dispatch(loadLang(e.target.value, getLangData));
      }
    }

    Using lang data

    i18n.get(...path) is a special method that safely obtains strings from lang data. If no strings were found on stated path, last key is returned. This method's calling is chainable:

    i18n.get('some', 'path', 'to')('lang', 'string')

    Every call is memoized. To receive string value from last call, use .toString() or .s property (it's also smart enough to be used as React element without calling .toString() or .s - NB: for this to work, you'll need a Symbol polyfill)

    // in this case lang data looks like:
    //  {
    //    "app": {
    //      "some": {
    //        "text": "foobar"
    //      },
    //      "element": {
    //        "something": {
    //          "else": "foobar"
    //        }
    //      }
    //    }
    //  }
     
    import { connect } from 'react-redux';
    import { getLang } from 'redux-pagan';
     
    @connect(state => ({
      lang: getLang(state.i18n, 'app'),
      locale: state.i18n.locale
    }))
    class App extends Component {
      render() {
        // string methods are proxied, no need to call .toString() either
        const str = this.props.lang('some', 'text').replace('foo', 'bar');
     
        return (
          <div>
            {this.props.lang('some', 'text')}
            <Element lang={this.props.lang('element')} />
          </div>
        );
      }
    }
     
    class Element extends Component {
      render() {
        return (
          <div>
            {this.props.lang('something', 'else')}
          </div>
        );
      }
    }

    Install

    npm i redux-pagan

    DownloadsWeekly Downloads

    22

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • alexkuz