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 code.
Live example here
Installation
npm i --save react-code-input
Usage
Numeric input:
...
<ReactCodeInput type='number' digits={6} />
...Text input:
...
<ReactCodeInput type='text' digits={6} />
...Password input:
...
<ReactCodeInput type='password' digits={6} />
...Numeric input with options:
const props = {
options: {
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'lightskyblue',
border: '1px solid lightskyblue'
}
}
...
<ReactCodeInput type='number' digits={6} {...props}/>
...Props:
type
Only types like: text, number, password are accepted.
options
Set the styles as options
...
options: PropTypes.shape({
fontFamily: PropTypes.string,
borderRadius: PropTypes.string,
border: PropTypes.string,
boxShadow: PropTypes.string,
margin: PropTypes.string,
paddingLeft: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
fontSize: PropTypes.string,
backgroundColor: PropTypes.string,
color: PropTypes.string,
}),
...digits
Amount of characters to enter.
value
Setting the initial value of code input field.
name
Set the name of input field.
onChange
Function, which is called whenever there is a change of value in the input box.
touch
Marks the given fields as "touched" to show errors.
untouch
Clears the "touched" flag for the given fields.
Compatible with
redux-form from erikras
License
MIT