mobin-code-input

mobin-code-input is a masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating.

Instalation

$ npm i mobin-code-input

Use

import CodeInput from 'mobin-code-input';
import 'mobin-code-input/dist/style.css';

<CodeInput
	fields={5}
	value={value}
	type='number'
	onChange={(value) => {
		setValue(value)
	}}
/>

Do not forget to import CSS file.

API Reference

| API | Type | required | Default | Description | | -------------- | -------------------------------- | :------: | :-------: | ------------------------------------- | | fields | number | ✓ | - | Number of input fields | | value | string, undefiend | ✘ | undefiend | Default value of code input | | type | 'string' , 'password' , 'number' | ✓ | - | Type of code inputs | | onChange | function | ✓ | - | Return the input value | | disabled | boolean | ✘ | false | Disable code input | | autoFocus | boolean | ✘ | true | Set autoFocus on first input field | | className | string | ✘ | - | Set className and style for container | | inputClassName | string | ✘ | - | Set className and style for inputs |