React-intl-input NPM

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	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.