react-input-otp

Install

npm install --save react-input-otp

Usage

Example

import React, { Component } from 'react';

import InputOtp from 'react-input-otp';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      otpCode: '',
    };
  }

  render () {
    const handleChange = otpCode => {
      this.setState({ otpCode });
    };

    return (
      <InputOtp onChange={handleChange} value={this.state.otpCode} />
    )
  }
};

Properties

Name	Type	Default	Description
otpLength	number	6	Number of OTP length
numberOnly	bool	false	Restrict to digit only (only valid when pattern is null)
type	string	'tel'	type property of <input> eg. password
pattern	RegExp	null	Pattern of characters available to the inputs
disabled	bool	false	Disable all the inputs
error	bool	false	Whether has error in OTP inputted
errorMessage	string	null	Error messaged showed when error is true
onChange	func	() => {}	Return OTP value
autoFocus	bool	false	Auto focus on the first OTP input
value	string	''	Default value
wrapperClass	string	styles.otpWrapper	Class appended to the whole wrapper
inputWrapperClass	string	styles.otpInputWrapper	Class appended to the wrapper of inputs
inputClass	string	styles.otpInput	Class appended to the inputs
errorMessageClass	string	styles.errorMessage	Class appended to the error message

Development

To run the development server:

npm start # runs rollup with watch flag

To run the example:

cd example
npm start

Contributing

Feel free to open issues and pull requests.

License

MIT © onefifteen-z