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.