React otpinput

Installation

To install the latest version:

npm install --save react-optinput

Basic usage:

import React from 'react';
import ReactDOM from 'react-dom';
import OtpInput from 'react-optinput';
import 'react-optinput/bundle.css';

class Demo extends React.Component {
  render() {
    return (
      <div>
        <OtpInput
          codeLength={5}
          onInputChange={value => {
            console.log(value);
          }}
        />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('root'));

API

Name	Type	Required	Default	Description
codeLength	number	true	4	number of input length
onInputChange	function	no	''	input event when input needs to be passed to parent component
disable	boolean	no	''	disable inputs

First beta v0.0.3-beta

This beta version is created to demostrate implementing otp/code/pin code input with react in a simpler way. The demo is created using webpack as building base. The package is packed with rollup. It was initially packed using webpack. During the stage of experiements, rollup shows a clear and simpler manner in module bundler. Dev dependencies and peer dependencies are available for reference in react-optinput. You may need peer dependecies react and react-dom for development purpose. Currently, default style is provided with import 'react-optinput/bundle.css'.

For you to try

To run the development server:

npm run dev

Checklist

• Add ESlint, Prettier for code quality
• Customize style support
• CI
• Unit tests

License

MIT