@kano/kbc-intl
> TODO: description
Last updated 6 days ago by onishiweb .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @kano/kbc-intl 
SYNC missed versions from official npm registry.

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

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;

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.

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:

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

Current Tags

  • 1.6.1                                ...           latest (6 days ago)

29 Versions

  • 1.6.1                                ...           6 days ago
  • 1.6.0                                ...           14 days ago
  • 1.5.2                                ...           19 days ago
  • 1.5.1                                ...           19 days ago
  • 1.5.0                                ...           19 days ago
  • 1.4.0                                ...           a month ago
  • 1.3.4                                ...           a month ago
  • 1.3.3                                ...           2 months ago
  • 1.3.2                                ...           2 months ago
  • 1.3.1                                ...           2 months ago
  • 1.3.0                                ...           2 months ago
  • 1.2.2                                ...           2 months ago
  • 1.2.1                                ...           2 months ago
  • 1.2.0                                ...           2 months ago
  • 1.1.1                                ...           2 months ago
  • 1.1.0                                ...           2 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
  • 4.26.9-alpha.0                                ...           3 months ago
  • 4.26.8-alpha.0                                ...           3 months ago
  • 4.26.1-alpha.0                                ...           4 months ago
  • 4.26.0-alpha.0                                ...           4 months ago
  • 4.25.4-alpha.0                                ...           4 months ago
  • 4.25.2-alpha.0                                ...           4 months ago
  • 4.25.1-alpha.0                                ...           4 months ago
  • 4.25.0-alpha.0                                ...           4 months ago
  • 4.24.1-alpha.0                                ...           4 months ago

Copyright 2014 - 2017 © taobao.org |