ff-stream-web

git clone git://archive.git.mtrnord.blog/MTRNord/ff-stream-web.git
Log | Files | Refs | README | LICENSE

how-to-integrate-react-intl.md (4433B)

      1 ## How to Integrate [React Intl](https://github.com/yahoo/react-intl#react-intl)
      2 
      3  1. Merge `feature/react-intl` branch with git.
      4     Because react-intl integration is built on top of `feature/redux`, you'll also get all the features.
      5 
      6  2. Adjust `INTL_REQUIRE_DESCRIPTIONS` constant in `tools/webpack.config.js` around line 17:
      7     ```js
      8     const INTL_REQUIRE_DESCRIPTIONS = true;
      9     ```
     10     When this boolean is set to true, the build will only succeed if a `description` is set for every message descriptor.
     11 
     12  3. Adjust `locales` settings in `src/config.js`:
     13     ```js
     14     // default locale is the first one
     15     export const locales = ['en-GB', 'cs-CZ'];
     16     ```
     17     Note that you should follow
     18     [BCP 47](https://tools.ietf.org/html/bcp47)
     19     ([RFC 5646](https://tools.ietf.org/html/rfc5646)).
     20 
     21  4. Add locale support in `src/client.js`:
     22     ```js
     23     import en from 'react-intl/locale-data/en';
     24     import cs from 'react-intl/locale-data/cs';
     25     ...
     26 
     27     [en, cs].forEach(addLocaleData);
     28     ```
     29 
     30  5. Execute `yarn run extractMessages` or `yarn start` to strip out messages.
     31     Message files are created in `src/messages` directory.
     32 
     33  6. Edit `src/messages/*.json` files, change only `message` property.
     34 
     35  7. Execute `yarn run build`,
     36     your translations should be copied to `build/messages/` directory.
     37 
     38 
     39 ### How to write localizable components
     40 
     41 Just import the appropriate [component](https://github.com/yahoo/react-intl/wiki#the-react-intl-module) from `react-intl`
     42 
     43 - For localizable text use
     44 [`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage).
     45 - You can also use it with
     46 the [`defineMessages()`](https://github.com/yahoo/react-intl/wiki/API#definemessages) helper.
     47 
     48 - For date and time:
     49 [`<FormattedDate>`](https://github.com/yahoo/react-intl/wiki/Components#formatteddate)
     50 [`<FormattedTime>`](https://github.com/yahoo/react-intl/wiki/Components#formattedtime)
     51 [`<FormattedRelative>`](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)
     52  
     53 - For numbers and currencies:
     54 [`<FormattedNumber>`](https://github.com/yahoo/react-intl/wiki/Components#formattednumber)
     55 [`<FormattedPlural>`](https://github.com/yahoo/react-intl/wiki/Components#formattedplural)
     56 
     57 - If possible, do not use `<FormattedHTMLMessage>`, see how to use *Rich Text Formatting* with
     58 [`<FormattedMessage>`](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage)
     59 
     60 - When you need an imperative formatting API, use the [`injectIntl`](https://github.com/yahoo/react-intl/wiki/API#injectintl) High-Order Component.
     61 
     62 #### Example
     63 
     64 ```jsx
     65 import { defineMessages, FormattedMessage, injectIntl, intlShape } from 'react-intl';
     66 
     67 const messages = defineMessages({
     68   text: {
     69     id: 'example.text',
     70     defaultMessage: 'Example text',
     71     description: 'Hi Pavel',
     72   },
     73   textTemplate: {
     74     id: 'example.text.template',
     75     defaultMessage: 'Example text template',
     76     description: 'Hi {name}',
     77   },
     78 });
     79 
     80 function Example(props) {
     81   const text = props.intl.formatMessage(messages.textTemplate, { name: 'Pavel'});
     82   return (
     83     <div>
     84       <FormattedMessage
     85         id="example.text.inlineDefinition"
     86         defaultMessage="Hi Pavel"
     87         description="Example of usage without defineMessages"
     88       />
     89       <FormattedMessage {...messages.text} />
     90       <FormattedMessage
     91         {...messages.textTemplate}
     92         values={{
     93           name: <b>Pavel</b>
     94         }}
     95       />
     96     </div>
     97   );
     98 }
     99 
    100 Example.propTypes = {
    101   intl: intlShape,
    102 }
    103 
    104 export default injectIntl(Example);
    105 ```
    106 
    107 ### Updating translations
    108 
    109 When running the development server, every source file is watched and parsed for changed messages.
    110 
    111 Messages files are updated on the fly.
    112 If a new definition is found, this definition is added to the end of every used `src/messages/xx-XX.json` file so when committing, new translations will be at the tail of file.
    113 
    114 When an untranslated message is removed and its `message` field is empty as well, the message will be deleted from all translation files. This is why the `files` array is present.
    115 
    116 When editing a translation file, it should be copied to `build/messages/` directory.
    117 
    118 ### Other References
    119 
    120  * [`Intl documentation on MDN`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl)
    121  * [express-request-language](https://github.com/tinganho/express-request-language#readme)
    122   – for more details how initial language negotiation works.