React PINInput component .
npm i --save pin-input
<PINInput
type='number'
fields={4}
/><PINInput
type='text'
fields={4}
/><PINInput
type='password'
fields={4}
/><PINInput
type='password'
inputType='number'
fields={4}
/><PINInput
type='password'
inputType='number'
showLastTypedValue={true}
fields={4}
/><PINInput
type='text'
fields={4}
filterKeyCodes={[189, 190]}
filterChars= {['-', '.']}
/><PINInput
type='text'
fields={4}
inputClassName={'pin-input'}
inputWrapperClassName={'pin-input-wrapper'}
/><PINInput
type='text'
fields={4}
value={'1111'}
/><PINInput
type='text'
fields={4}
readOnly={true}
/>| Property | Type | Description |
|---|---|---|
| type | string | Only types like: text, number, password are accepted. |
| inputType | string | The inputType prop you can set with the type="password" for accepting password type (number or text) |
| fields | number | Allowed amount of characters to enter. |
| value | string | Setting the initial value of code input field. |
| onChange | func | Function, which is called whenever there is a change of value in the input box. |
| onKeyDown | func | Function, key down call back function |
| inputClassName | string | Add classname to the input element. |
| inputWrapperClassName | string | Add classname to the div element. |
| readOnly | bool | When present, it specifies that the element should be disabled. |
| autoFocus | bool | Setup autofocus on the first input, true by default. |
| filterKeyCodes | array | Filter characters on key down. |
| filterChars | array | Filter characters. |
| pattern | string | The pattern prop specifies a regular expression that the element's value is checked against. |
MIT