Last active
October 4, 2016 09:35
-
-
Save zv3/804ea6da48d149ca9ddf583a7f9ab1a1 to your computer and use it in GitHub Desktop.
Example of a React app + react-intl library along with an external json-formatted messages file and it's spanish translated version. Live demo: https://embed.plnkr.co/xm0iHI/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { IntlProvider, FormattedMessage, addLocaleData } = ReactIntl; | |
| // Import your json file containing the default messages | |
| import defaultMessages from './defaultMessages.json!json'; | |
| // Import your json file containing the translated messages, | |
| // in this example we are importing the spanish version of our messages. | |
| import spanishMessages from './en_ES.json!json'; | |
| const { es } = ReactIntlLocaleData; | |
| addLocaleData([...es]); | |
| const App = () => ( | |
| <IntlProvider locale="es" messages={spanishMessages}> | |
| <div> | |
| <FormattedMessage | |
| // Pass the corresponding property from the defaultMessages object that was previously loaded in line 4, | |
| // each property in the .json file needs to be defined using the 'Message Descriptor' signature/concept (https://github.com/yahoo/react-intl/wiki/API#message-descriptor) | |
| {...defaultMessages.headerStrings.title} | |
| /> | |
| </div> | |
| </IntlProvider> | |
| ); | |
| ReactDOM.render(<App />, document.getElementById("root")); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "headerStrings": { | |
| "title": { | |
| "id": "headerStrings.title", | |
| "description": "Title of the app.", | |
| "defaultMessage": "Intl Company, Inc." | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "headerStrings.title": "Titulo de la aplicación" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://unpkg.com/[email protected]/dist/react.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/dist/react-intl.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/locale-data/es.js"></script> | |
| <script src="https://jspm.io/[email protected]"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/javascript"> | |
| System.config({ | |
| transpiler: 'babel', | |
| packages: { | |
| './': { | |
| defaultExtension: false | |
| }, | |
| } | |
| }); | |
| System | |
| .import('./app.jsx') | |
| .catch (console.error.bind(console)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment