npm package: @kano/kbc-intl
Description: > TODO: description
Author: Kano Computing
Latest version: 2.0.13

# `kbc-intl`

Components and functions to provide the ability to add different locales to apps.

### <LanguageProvider>
The language provider should sit at the top level of your app and can take in the following props.

#### Props
* __locale__: _string_ - The current locale, this can be a 2 (fr) or 5 (en-US) character language specifier
* __messages__?: _LocaleMessages_ - The apps loaded translated messages object compiled by the apps i18n.js file located at `./src/i18n.js`;

#### Usage
```js
import LanguageProvider from '@kano/kbc-intl';
import { translationMessages } from './i18n';

<LanguageProvider locale="de" messages={translationMessages}>
    <App />
</LanguageProvider>
```


### defineMessages()
Defines a components locale messages.

#### Usage
For a given component if this component requires translations you should create a `messages.ts` within that components directory which would include the below message definitions.

I.e. `./src/components/Navbar/messages.ts`;

```js
import { defineMessages } from 'react-intl';

export const scope = 'components.Navbar';

export default defineMessages({
  challenges: {
    id: `${scope}.home`,
    defaultMessage: 'Home',
  },
  userProfile: {
    id: `${scope}.userProfile`,
    defaultMessage: 'Made with love by {user}.',
  }
});
```

## Rendering intl messages within components/containers

### <FormattedMessage>
Using the `FormattedMessage` component will display a given message from your `messages.ts` file in the selected current active language.

You will also notice a more complex use of `FormattedMessage` for the author message where alternate or variable values (i.e. `author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,`) are being injected, in this case it's a react component.

```js
import React from 'react';

import messages from './messages';
import A from 'components/A';
import styles from './styles.css';
import { FormattedMessage } from 'react-intl';

function Navbar() {
  return (
    <nav className={styles.footer}>
      <section>
        <p>
          <FormattedMessage {...messages.Home} />
        </p>
      </section>
      <section>
        <p>
          <FormattedMessage
            {...messages.userProfile}
            values={{
              user: <A href="https://twitter.com/00Jams">Jams Bond</A>,
            }}
          />
        </p>
      </section>
    </nav>
  );
}

export default Navbar;
```

### injectIntl()
Another way to render messages is by using a higher order component to pass `intl` object to props and then use the `intl.formatMessage` to pass messages as string props to components, see below for example:

```js
import React, { Component } from 'react';
import { injectIntl, IIntlShape, IInjectIntlChildProps } from 'react-intl';

import messages from './messages';
import { NavbarItem } from './NavLink';

// Pass types via the shape
interface NavbarProps {
    intl: IIntlShape;
}

// Or Extend using the IInjectIntlChildProps
interface NavbarProps extends IInjectIntlChildProps {}

class NavbarC extends Component<NavbarProps> {
    render() {
        const { intl } = this.props;

        return (
              <div className="navbar">
                  <div className="row">
                      <div className="navbar__children">
                          <NavbarItem text={intl.formatMessage({...messages.home})} />
                      </div>
                  </div>
              </div>
        );
    }
}

export const Navbar = injectIntl(NavbarC);
```