Natural Polyglot Machine

    react18-input-otp
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    react18-input-otp

    npm version npm npm

    A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

    see here

    Live Demo

    CodeSandbox

    Features

    • A fully customisable OTP input package with support of React 18 and Typescript.
    • It works great on both react and ionic app. Works like a charm on mobile too.
    • You can specify only numeric inputs with inputNum prop.
    • Works perfectly with clipboard paste feature on web and mobile.
    • The only OTP input package on npm that supports 'enter' key to submit.
    • Zero OTP paste issues on Android.
    • Easy paste on iOS chrome, read from SMS feature.
    • Supports onSubmit optional prop. You do not even need a button to submit.
    • You can use this package for phone number inputs too.
    • You can use this package for passcode fields too with inputSecure prop.
    • You can provide custom css as well as input props to the React18-input-otp.
    • 0 dependencies.
    • Minzipped size only 3.6 kb.
    • No open issues.
    • No security bugs.

    Installation

    NPM

    To install the latest stable version:

    npm install --save react18-input-otp
    

    Basic usage:

    As class component
    import React, { Component } from 'react';
    import OtpInput from 'react18-input-otp';
    
    export default class App extends Component {
      state = { otp: '' };
    
      handleChange = (otp) => this.setState({ otp });
    
      render() {
        return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
      }
    }
    As functional component with hooks
    import React, { useState } from 'react';
    import OtpInput from 'react18-input-otp';
    export default function ReactOtpInput() {
      const [otp, setOtp] = useState('');
      const handleChange = (enteredOtp) => {
        setOtp(enteredOtp);
      };
      return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
    }

    API

    Name
    Type Required Default Description
    id string false none Provide unique id for your OTP input.
    numInputs number true 4 Number of OTP inputs to be rendered.
    onChange function true console.log Returns OTP code typed in inputs.
    onSubmit function false console.log Returns OTP code on submit. This allows to submit the OTP on enter key too.
    value string / number true '' The value of the OTP passed into the component.
    placeholder string false none Specify an expected value of each input. The length of this string should be equal to numInputs.
    separator component
    false none Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input.
    separateAfter number
    false 1 Provide the count to set the separater after every input. For instance, 3 would add - after every third input.
    autoComplete string
    false off Provide the autocomplete feature for the input. Now, supports one-time-code as autoComplete.
    ariaLabelOverride string
    false none Provide the custom arialabel for the 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.
    isInputSecure boolean false false Masks input characters.
    data-cy string false - Test attribute passed to the inputs.
    data-testid string false - Test attribute passed to the inputs.
    custom-test-id string false - Custom test attribute passed to the inputs.
    custom-test-attr string false - Custom test attribute passed to the inputs.
    inputProps InputHTMLAttributes | InputHTMLAttributes[] false - Custom input props.

    Development

    To run the development server:

    npm run dev
    

    Checklist

    PRs Welcome Open Source Love

    • [x] Add flowtypes
    • [x] Add ESLint, Prettier for code quality
    • [x] Add styling support for states including focus/disabled
    • [ ] Write tests

    Contributing

    GitHub issues GitHub pull requests

    Feel free to open issues and pull requests!

    License

    NPM

    Special Thanks to devfolioco. This project is build on top of react-otp-input.

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i react18-input-otp

    DownloadsWeekly Downloads

    3,070

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    30.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • ritikb