@onefifteen-z/react-input-otp NPM

react-input-otp

Install

npm install --save @onefifteen-z/react-input-otp

Usage

Example

import React, { Component } from 'react';

import InputOtp from '@onefifteen-z/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

NPM

OTP one time password input-otp otp-input React input

@infinitebrahmanuniverse/nolb-_one @everything-registry/sub-chunk-681

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago