Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    @iqoption/affiliate-redux-translations
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    redux-translations

    Translations utils for react-redux apps

    Greenkeeper badge npm npm Travis Codecov license Commitizen friendly Libraries.io for GitHub

    Install

    npm i @iqoption/affiliate-redux-translations

    Usage

    Translations middleware

    Create and config translations middleware and apply it.

    import { createTranslationsMiddleware } from "@iqoption/affiliate-redux-translations";
     
    // Change this function to yours
    const functionThatReturnsPromiseWithDictionary = language =>
      Promise.resolve(
    ¬†¬†¬†¬†language¬†===¬†"en"¬†?¬†{¬†hello:¬†"Hello!"¬†}¬†:¬†{¬†hello:¬†"–ü—Ä–ł–≤–Ķ—ā!"¬†}
      );
     
    const translationsMiddleware = createTranslationsMiddleware(
      functionThatReturnsPromiseWithDictionary
    );
     
    const store = createStore(rootReducer, applyMiddleware(translationsMiddleware));

    Translations props

    Wrap component with withTranslations function:

    import withTranslations from "@iqoption/affiliate-redux-translations";
     
    const MyComponent = ({ dictionary, currentLang, loadingLang, switchLang }) => (
      <div>
        Translated text: {dictionary["hello"]}
        <br />
        Current language: {currentLang}
        <br />
        Loading language: {loadingLang}
        <button onClick={() => switchLang("en")}>English</button>
        <br />
        <button onClick={() => switchLang("ru")}>Russian</button>
      </div>
    );
     
    const MyComponentTranslated = withTranslations(MyComponent);

    You can change language not only in react-component:

    import { switchLangActionCreator } from "@iqoption/affiliate-redux-translations";
    store.dispatch(switchLangActionCreator("en"));

    API

    createTranslationsMiddleware(getDictionary, [options], [initialState])

    Function, that creates redux-middleware for translations. Has next arguments:

    1. getDictionary (Function) - function with one argument type of string - language, that user is switching to, and returns promise with dictionary object.

    2. [options] (Object) - options object with next optional fields:

    • cache (Boolean) - should cache results of getDictionary, and do not call it if dictionary is already loaded. Default true.
    • updateCacheOnSwitch (Boolean) - when cache is true, should switch immediately to cached dictionary, but load dictionary in background one more time and replace old with the new one. Default false.
    • startSwitchCallback (Function) - callback for every language switching start. Run exactly in switch event, without waiting for fetching dictionary. Takes next arguments: loadingLang (String) and store. Default undefined.
    • endSwitchCallback (Function) - callback for every language switching end. Run exactly after fetching dictionary. Takes next arguments: loadedLang (String), dictionary (Object) and store. Default undefined.
    1. [initialState] (Object) - initial inner state object with next optional fields:
    • dictionaries (Object) - hash-table of dictionaries, where key is language name and value is dictionary. Default {}.
    • currentLang (String) - current language with fetched dictionary. Default null.
    • loadingLang (String) - language that user is switching to, but not fetched dictionary yet. Default null.

    withTranslations(Component, [copyStaticMethods])

    React component class wrapper that adds next props to wrapping component class (actually it returns new component class):

    1. currentLang (String) - language, which dictionary is currently using.

    2. loadingLang (String) - language, which dictionary is currently loading.

    3. dictionary (Object) - object, that is returned by getDictionary.

    4. switchLang (Function) - function, that switch language to passed one.

    Arguments:

    1. Component (Function) - component that depends on props, listed above.

    2. copyStaticMethods (Boolean) - whether to copy static methods of Component or not. Default true.

    switchLangActionCreator(language)

    Redux action creator - function with one argument type of string, returns flux standard action (FSA), that you can dispatch whereever in your app (for example, when initialising your app).

    patchState(changes, [updateComponents])

    Patch translations inner state without dispatching redux action. Could be useful for server-side rendering or another cases where store.dispatch function is unreachable. Returns Promise, resolved when all components are updated (if updateComponents === true) or immediately. Has next arguments:

    1. changes (Object) - partial initial inner state object with next optional fields:
    • dictionaries (Object) - hash-table of dictionaries, where key is language name and value is dictionary.
    • currentLang (String) - current language with fetched dictionary.
    • loadingLang (String) - language that user is switching to, but not fetched dictionary yet.
    1. updateComponents (Boolean) - whether to update components or not.

    Install

    npm i @iqoption/affiliate-redux-translations

    DownloadsWeekly Downloads

    2

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    62.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar