Simple Verification Code input for ReactJS

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 | |

TODO

• [ ] Add default styles and className support
• [ ] Add tests
• [ ] Add live demo

License

MIT © Ohmunity™