@ohmunity/verification-code NPM

Simple Verification Code input for ReactJS

Minified size Minzipped size License

Demo

Live demo coming soon

Install

npm install --save @ohmunity/verification-code

Usage

import React, { Component } from "react";

import VerificationCode from "@ohmunity/verification-code";

const App = () => {
  return <VerificationCode type="number" total={6} onComplete={console.log} />;
};

You can also Customize the input field

import React, { Component } from "react";

import VerificationCode from "@ohmunity/verification-code";

const App = () => {
  return (
    <VerificationCode
      type="number"
      total={6}
      onComplete={console.log}
      Component={React.forwardRef((props, ref) => (
        <FormField ref={ref} {...props} />
      ))}
    />
  );
};

Props

Prop	Type	Description
type	"number" \| "string"	input type	required
total	number	total of digits	required
value	string	default value
id	string	element id
placeholder	string	element placeholder (same for all)
disabled	boolean	element disabled status
required	boolean	element required status
onChange	Function	calls the function every time a field changes
onComplete	Function	call the function once all the fields are completed
Component	React Component	support for custom React Component
clearAfterComplete	boolean	clear fields after completion