diff --git a/packages/i18n/README.md b/packages/i18n/README.md index 990b11ad4af..ab18679696f 100644 --- a/packages/i18n/README.md +++ b/packages/i18n/README.md @@ -38,3 +38,71 @@ in the browser, simply include this script: ```html ``` + +## Exports + +This package has the following named exports: + + - account + - app + - email + - errors + - gdpr + - i18n + - strings + +All exports are an object with a property for each language. + +## How to use these translations + +We use these translations in our [website repository](https://github.com/freesewing/website) to +translate react components with [react-intl](https://github.com/yahoo/react-intl): + +```js +import { strings } from "@freesewing/i18n"; +import { IntlProvider } from "react-intl"; + +class Base extends React.Component { + render() { + const { language } = this.props; + + return ( + + {...children} + + ) + } +} +``` + +Now all components below will be able to translate messages: + +```js +import React from "react"; +import { FormattedMessage } from "react-intl"; + +const Example = props => { + return

+}; + +export default Example; +``` + +For all details, please refer to +[the react-intl documentation](https://github.com/yahoo/react-intl/wiki). + + +We also use it in our [backend repository](https://github.com/freesewing/website) +to translate the emails we send out to users. + +## Exports + +This package provides the following named exports: + + - account : Translated messages related to user accounts (frontend) + - app : Translated messages for the web app (frontend) + - errors : Translated error messages (frontend) + - gdpr : Translated privacy/GDPR messages + - i18n : Translated names of languages (frontend) + - strings : This combines all frontend exports in a flat object (frontend) + - email : Strings for translating emails (backend)