react-intl-input

A flexible input control for React to handle multi languages fields.

Installation

npm install --save react-intl-input

Then you can import one of react-intl-input components as follows:

import { IntlInput } from 'react-intl-input';

Features

• Can be used standalone
• Works with redux-form
• Easy customization

Basic usage

import { IntlInput } from 'react-intl-input';

class Form extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      languages: [
       { value: 'en', label: 'English' },
       { value: 'fr', label: 'French' },
      ],
      initialValues: {
        en: 'This is an english translation',
        fr: 'Ceci est un texte en francais',
      },
    }
  }

  render() {
    return (
      <form onSubmit={() => {}}>
        <IntlInput
          name="basic-intl-input"
          {...this.state}
        />
      </form>
    )
  }
}

Demo & Examples

Live demo with many concrete examples: papswell.github.io/react-intl-input

Props

| Property | Type | Default | Description | |:---|:---|:---|:---| | name | string (required) | | The name attribute of the html input. | | languages | array (required) | | The languages handled by the input | | initialLang | string | | The language selected on the first render | | initialValues | object | | The initial values for each language | | onLangChange | func | | Called whenever the language selection changes. onLangChange({ value, label}, state) | | onInputChange | func | | Called whenever the current value changes. onInputChange(currentLanguage, inputValue, state) | | onInputFocus | func | | Called when the input is focused. onInputFocus(syntheticEvent) | | onInputBlur | func | | Called when the input is blurred. onInputChange(syntheticEvent) | | inputComponent | func | | A function or a React.Component to be used as the input. |