chakra-otp-input

One Time Password Component Package for Chakra UI

Codesandbox Link Here

NPM Link Here

Install

npm i chakra-otp-input

Usage

Basic Usage

import { Flex, FormControl, ChakraProvider, theme } from "@chakra-ui/react";
import * as React from "react";
import { OTPInput } from "chakra-otp-input";

export default function App() {
  const handleOTPInput = (value) => {
    console.log(value);
  };

  return (
    <ChakraProvider theme={theme}>
      <Flex pt="48" justify="center" align="center" w="full">
        <FormControl w="60">
          <OTPInput noInputs={6} onChange={handleOTPInput} />
        </FormControl>
      </Flex>
    </ChakraProvider>
  );
}

API

Running project

• Clone this repository

git clone https://github.com/Buupu/chakra-otp-input.git

• Install all dependencies

npm i

• Install package example dependencies

cd example
npm i

• Start the package server, and the example server

# root directory
npm start

# example directory
npm run dev