Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

otp-input-react

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

otp-input-react

React functional component for otp input

  • 0.2.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.2K
decreased by-8.14%
Maintainers
1
Weekly downloads
 
Created
Source

otp-input-react

A fully customizable, one-time password input with resend OTP component for the web built with React functional component.

NPM

Coverage Status

npm

GIPHY

Working Demo

Installation

npm install --save otp-input-react

Usage:

import OTPInput, { ResendOTP } from "otp-input-react";

function App() {
  const [OTP, setOTP] = useState("");
  return (
    <OTPInput
      value={OTP}
      onChange={setOTP}
      autoFocus
      OTPLength={4}
      otpType="number"
      disabled={false}
      secure
    />
    <ResendOTP onResendClick={() => console.log("Resend clicked")} />
  );
}

API

OTP input

NameTypeRequiredDefaultDescriptionStatus
OTPLengthNumberfalse4Number of input boxes.Working
onChangeFunctiontrue-Returns OTP code typed in inputs.Working
valueString / Numbertrue''The value of the otp passed into the component.Working
disabledBooleanfalsefalseDisables all the inputs.Working
autoFocusBooleanfalsefalseAuto focuses input on initial page load.Working
otpTypeEnum: any|number|alpha|alphanumericfalseanyany - allows any value. number - allow only numbers. alpha - allows only a-zA-Z. alphanumeric - allows 0-9a-zA-zWorking
secureBooleanfalsefalseChange input type to password.Working
inputClassNameString--Class for root element.Working
classNameString--Class for root element.Working
inputStylesObject--Styles for input element.Working
styleObject--Styles for root element.Working

Resend OTP

NameTypeRequiredDefaultDescriptionStatus
maxTimeNumberfalse60Timer that user has to wait before resend otp gets active.Working
onResendClickFunctiontrue-Function get triggers when user click on resend otp button. But when button is disabled(i.e. time is not completed) it won't get triggerWorking
onTimerCompleteFunctionfalse-An optional callback when timer completes.Working
timeIntervalNumberfalse1000You can change time interval.Working
renderTimeFunction - render propsfalse-You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer.Working
renderButtonFunction - render propsfalse-You can use your own component for resend button. Function will get disabled and onClick function and remainingTime as props you can pass it to your component.Working
styleObjectfalse-For changing root component inline stylesWorking
classNamestringfalse-For adding class to root component.Working

Custom timer and button component

const renderButton = buttonProps => {
  return <button {...buttonProps}>Resend</button>;
};
const renderTime = remainingTime => {
  return <span>{remainingTime} seconds remaining</span>;
};
<ResendOTP renderButton={renderButton} renderTime={renderTime} />;

Hide timer and show sec in button component

const renderButton = buttonProps => {
  return (
    <button {...buttonProps}>
      {buttonProps.remainingTime !== 0
        ? `Please wait for ${buttonProps.remainingTime} sec`
        : "Resend"}
    </button>
  );
};
const renderTime = () => React.Fragment;
<ResendOTP renderButton={renderButton} renderTime={renderTime} />;

TODO

  • Add other type input
  • Change scaffolding
  • Add CI
  • Add OTP Timer with resend otp optional type
  • Add Complete callback for otp

Credits

https://github.com/hotdang-ca - For adding alpha|alphanumeric type and updating docs

Contributing

Feel Free to contributing or feature request

  1. Fork it ( https://github.com/shubhanus/otp-input-react/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new pull request.

FAQs

Package last updated on 21 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc