# @kano/kbc-intl

> > TODO: description

Latest version **2.0.13** (published 2023-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kano/kbc-intl
pnpm add @kano/kbc-intl
yarn add @kano/kbc-intl
bun add @kano/kbc-intl
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.13 |
| Published | 2023-01-26 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 70.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kano Computing |
| Maintainers | petarsimonovic, aetheern, kimonsatan, sophioski, hediho, ellenw3lsh, melissakano, camuskano, jacobmorgan99, alexfiennes, kanocomputing, rpazdera, hicksatkano, holographicleah, tomkano, alexb-kano, jamie_old_plantain |

## Links

- npm: https://www.npmjs.com/package/@kano/kbc-intl
- Repository: https://github.com/KanoComputing/kano-boilerplate-components
- Homepage: https://github.com/KanoComputing/kano-boilerplate-components#readme
- Issues: https://github.com/KanoComputing/kano-boilerplate-components/issues
- npm.io page: https://npm.io/package/@kano/kbc-intl

## Dependencies (5)

- [react-intl](https://npm.io/package/react-intl.md) 3.12.0
- [utility-types](https://npm.io/package/utility-types.md) ^3.10.0
- [@kano/kbc-utils](https://npm.io/package/@kano/kbc-utils.md) ^2.2.4
- [@types/react-intl](https://npm.io/package/@types/react-intl.md) 3.0.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Recent versions

- 2.0.13 (latest) — 2023-01-26
- 2.0.12 — 2023-01-10
- 2.0.11 — 2021-11-26
- 2.0.10 — 2021-11-25
- 2.0.9 — 2021-11-25
- 2.0.8 — 2021-10-01
- 2.0.7 — 2021-09-30
- 2.0.6 — 2021-06-23
- 2.0.5 — 2021-06-16
- 2.0.4 — 2021-05-06
- 2.0.3 — 2021-03-24
- 2.0.2 — 2021-02-23
- 2.0.1 — 2021-01-21
- 2.0.0 — 2021-01-08
- 2.0.0-pre.2 — 2021-01-07
- … 49 more at https://npm.io/package/@kano/kbc-intl/versions

## README

# `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);
```

---
_Source: https://npm.io/package/@kano/kbc-intl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._