React-reinput NPM

#Reinput ###React input component backed by regex of all sorts.

Reinput utilizes the power of regular expressions to provide robust input validation and grouping.

###Quick start

Install via npm

npm install react-reinput --save

and use it in your React components:

<Reinput pattern={/^(\d{1,4})?(\d{1,4})?(\d{1,4})?(\d{1,4})?$/} separator=" " />

###Documentation

####Available props

Prop name	Prop type	Default	Description
`pattern`	React.PropTypes.any	`^(.*)$`	A string or a RexExp containing regular expression with *capturing groups*. User input is split into groups and groups are displayed with a provided `separator` between them. If `pattern` doesn't contain capturing groups then input will not work properly.
`separator`	React.PropTypes.string	`' '`	A character intended to separate groups from one another. It is expected to be just one character wide.
`initValue`	React.PropTypes.string	`''`	Sets the initial value of the input. Note, that `initValue` is processed with a regular expression provided in `pattern` and must match it. Otherwise it is not set and not displayed to the user.
`mask`	React.PropTypes.string	`''`	Mask describes a placeholder string: each letter in all groups, separated by spaces, is converted into a `placeholder` character and displayed in the input field. When component receives focus placeholder string is hidden. If component lost focus and nothing was typed then placeholder is displayed again.
`placeholder`	React.PropTypes.string	`_`	A character from which the placeholder string is created.
`trimInitValue`	React.PropTypes.bool	`false`	Indicates whether `initValue` should be trimmed before processing.
`className`	React.PropTypes.string	`''`	Pass your class names here to apply them to input element.

8 years ago

8 years ago