From a57dfc8294e68829a7d54a532bb987fc10136761 Mon Sep 17 00:00:00 2001 From: David Smith Date: Thu, 16 Mar 2017 12:05:35 +0000 Subject: [PATCH] Add intl, react-intl --- package.json | 4 +++- src/components/App.js | 16 ++++++++++++++-- src/components/Buttons.js | 18 ++++++++++++++++-- src/components/FileCounter.js | 10 +++++++++- src/components/Text.js | 16 ++++++++++++++-- src/index.js | 14 +++++++++++++- yarn.lock | 35 ++++++++++++++++++++++++++++++++++- 7 files changed, 103 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index eaff7f5..95f6acc 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "start": "webpack-dev-server" }, "dependencies": { + "intl": "^1.2.5", "react": "^15.4.2", - "react-dom": "^15.4.2" + "react-dom": "^15.4.2", + "react-intl": "^2.2.3" }, "devDependencies": { "babel-core": "^6.23.1", diff --git a/src/components/App.js b/src/components/App.js index 714775f..19826a0 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,12 +1,24 @@ import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; import Buttons from './Buttons'; import Text from './Text'; import FileCounter from './FileCounter'; +const msg = defineMessages({ + hello: { + id: 'App.welcome', + defaultMessage: 'Hello world!', + }, + goodbye: { + id: 'App.farewell', + defaultMessage: 'The end', + }, +}); + const App = () => (
-

Hello world!

+

@@ -17,7 +29,7 @@ const App = () => ( -

The end

+

); diff --git a/src/components/Buttons.js b/src/components/Buttons.js index dc7ee98..cacea5a 100644 --- a/src/components/Buttons.js +++ b/src/components/Buttons.js @@ -1,9 +1,23 @@ import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +const msg = defineMessages({ + press: { + id: 'Buttons.press', + description: 'User presses button to take an action', + defaultMessage: 'Press me', + }, + cancel: { + id: 'Buttons.cancel', + description: 'User presses button to cancel action', + defaultMessage: 'Cancel', + }, +}); const Buttons = () => (
- - + +
); diff --git a/src/components/FileCounter.js b/src/components/FileCounter.js index d42941f..9ca8fd4 100644 --- a/src/components/FileCounter.js +++ b/src/components/FileCounter.js @@ -1,7 +1,15 @@ import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +const msg = defineMessages({ + label: { + id: 'FileCounter.label', + defaultMessage: 'You have { numFiles, plural, =0 {no files} one {one file} other {# files} }', + }, +}); const FileCounter = ({ numFiles }) => ( -

You have { numFiles } file(s)

+

); export default FileCounter; diff --git a/src/components/Text.js b/src/components/Text.js index 5d75483..a88c408 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -1,14 +1,26 @@ import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; import FileCounter from './FileCounter'; +const msg = defineMessages({ + intro: { + id: 'Text.intro', + defaultMessage: 'This is some boring text related to {name}.', + }, + thanks: { + id: 'Text.thanks', + defaultMessage: 'Thank you.', + }, +}); + const Text = ({ name, number }) => (
-

This is some boring text related to {name}.

+

-

Thank you.

+

); diff --git a/src/index.js b/src/index.js index abfee4d..8a672e3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,21 @@ +import 'intl'; + import React from 'react'; import ReactDOM from 'react-dom'; +import { IntlProvider, addLocaleData } from 'react-intl'; + +// add locale data statically: could be done dynamically, eg see react-intl-loader +import 'intl/locale-data/jsonp/en-GB'; +import en from 'react-intl/locale-data/en'; + import App from './components/App'; +addLocaleData(en); + ReactDOM.render( - , + + + , document.getElementById('root') ); diff --git a/yarn.lock b/yarn.lock index 68b6d14..8830c92 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1252,7 +1252,31 @@ interpret@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c" -invariant@^2.2.0: +intl-format-cache@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.0.5.tgz#b484cefcb9353f374f25de389a3ceea1af18d7c9" + +intl-messageformat-parser@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.2.0.tgz#5906b7f953ab7470e0dc8549097b648b991892ff" + +intl-messageformat@1.3.0, intl-messageformat@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-1.3.0.tgz#f7d926aded7a3ab19b2dc601efd54e99a4bd4eae" + dependencies: + intl-messageformat-parser "1.2.0" + +intl-relativeformat@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-1.3.0.tgz#893dc7076fccd380cf091a2300c380fa57ace45b" + dependencies: + intl-messageformat "1.3.0" + +intl@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde" + +invariant@^2.1.1, invariant@^2.2.0: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -1934,6 +1958,15 @@ react-dom@^15.4.2: loose-envify "^1.1.0" object-assign "^4.1.0" +react-intl@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.2.3.tgz#8eebb03cddc38b337ed22fab78037ab53a594270" + dependencies: + intl-format-cache "^2.0.5" + intl-messageformat "^1.3.0" + intl-relativeformat "^1.3.0" + invariant "^2.1.1" + react@^15.4.2: version "15.4.2" resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"