gmoura/react-pinco

Pinco - React Pincode

react-pinco

A fully customizable, pincode password input component for the web built with React.

Installation

To install the latest stable version:

npm install --save react-pinco

Basic usage:

import React, { Component } from 'react';
import PincodeInput from 'react-pinco';

export default class App extends Component {
  state = {
    otp: [],
  };

  handleChange = otp => this.setState({ otp });

  render() {
    return (
      <div>
        <PincodeInput
          onChange={this.handleChange}
          numInputs={6}
          separator={<span>-</span>}
        />
      </div>
    );
  }
}

API

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of pincode inputs to be rendered.
value	array of string	array	[]	The value of the pincode passed into the component.
initialValue	array of string	false	[]	If you want to start with a initial value. Example ['1', '2', '3', '4']
clear	boolean	false	false	If you want to clear pincode value
onChange	function	true	console.log	Returns pincode typed in inputs.
separator	component	false	none	Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input
containerStyle	style (object) / className (string)	false	none	Style applied or class passed to container of inputs.
inputStyle	style (object) / className (string)	false	none	Style applied or class passed to each input.
focusStyle	style (object) / className (string)	false	none	Style applied or class passed to inputs on focus.
isDisabled	boolean	false	false	Disables all the inputs.
disabledStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when disabled.
hasErrored	boolean	false	false	Indicates there is an error in the inputs.
errorStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when errored.
shouldAutoFocus	boolean	false	false	Auto focuses input on initial page load.
isInputNum	boolean	false	false	Restrict input to only numbers.

Development

To run the development server:

npm run dev

To run the development server for example:

npm run docs

To make a production build of the example:

npm run docs:prod

Contributing

Feel free to open issues and pull requests!

License

MIT