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

MIT © onefifteen-z