React PINInput

React PINInput component .

Installation

npm i --save pin-input

Usage

Numeric Input

<PINInput
          type='number'
          fields={4}
        />

Text input:

<PINInput
          type='text'
          fields={4}
        />

Password input:

<PINInput
          type='password'
          fields={4}
        />

Password input with numeric input type:

<PINInput
          type='password'
          inputType='number'
          fields={4}
        />

Password input with showing last typed input value:

<PINInput
          type='password'
          inputType='number'
          showLastTypedValue={true}
          fields={4}
        />

Passing filter key codes and characters :

<PINInput
          type='text'
          fields={4}
          filterKeyCodes={[189, 190]}
          filterChars= {['-', '.']}
        />

Passing class for input wrapper div and for input:

<PINInput
          type='text'
          fields={4}
          inputClassName={'pin-input'}
          inputWrapperClassName={'pin-input-wrapper'}
        />

Passing default value

<PINInput
          type='text'
          fields={4}
          value={'1111'}
        />

Passing readOnly param

<PINInput
          type='text'
          fields={4}
          readOnly={true}
        />

Pass callback functions

const someFunction = () =>{
  
}

<PINInput
          type='text'
          fields={4}
          onChange={someFunction}
          onKeyDown={someFunction}
        />

Props:

| 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. | default: ['-', '.'] | | pattern | string | The pattern prop specifies a regular expression that the element's value is checked against. |

License

MIT