Package Exports

react-code-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-code-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-code-input

React component for entering and validating PIN code.

Live example here

Installation

npm i --save react-code-input

Usage

Numeric input:

Numeric input

...
<ReactCodeInput type='number' fields={6} />
...

Text input:

Text input

...
<ReactCodeInput type='text' fields={6} />
...

Password input:

Password input

...
<ReactCodeInput type='password' fields={6} />
...

Numeric input with options:

Numeric input with options

import { reactCodeInput } from 'CodeInputField.scss'
...
const props = {
  className: reactCodeInput,
  inputStyle: {
    fontFamily: 'monospace',
    margin:  '4px',
    MozAppearance: 'textfield'
    width: '15px',
    borderRadius: '3px',
    fontSize: '14px',
    height: '26px',
    paddingLeft: '7px',
    backgroundColor: 'black',
    color: 'lightskyblue',
    border: '1px solid lightskyblue'
  },
  inputStyleInvalid: {
    fontFamily: 'monospace',
    margin:  '4px',
    MozAppearance: 'textfield'
    width: '15px',
    borderRadius: '3px',
    fontSize: '14px',
    height: '26px',
    paddingLeft: '7px',
    backgroundColor: 'black',
    color: 'red',
    border: '1px solid red'
  }
}
...
<ReactCodeInput type='number' fields={6} {...props}/>
...

Props:

Property	Type	Description
type	string	Only types like: `text`, `number`, `password` and `tel` are accepted.
fields	number	Allowed amount of characters to enter.
value	string	Setting the initial value of code input field.
name	string	Setting the name of component.
onChange	func	Function, which is called whenever there is a change of value in the input box.
touch	func	Marks the given fields as "touched" to show errors.
untouch	func	Clears the "touched" flag for the given fields.
className	string	Add classname to the root element.
style	object	Setting the styles of container element.
inputStyle	object	Setting the styles of each input field.
inputStyleInvalid	object	Setting the styles of each input field if `isValid` prop is `false`.
isValid	bool	Returns true if an input element contains valid data.
disabled	bool	When present, it specifies that the element should be disabled.

Compatible with

redux-form from erikras

Donate

Bitcoins BTC: 16ej11QdynM4goVEZNpxkH98Rm9rnc4ocC

Ethereum ETH: 0xebdd15e8c0f96cf06b58c586ca3368aea04949fd

License

MIT