otp-mtolia

[![Status](https://img.shields.io/badge/status-active-success.svg)]() [![GitHub Issues](https://img.shields.io/github/issues/moneytolia/otp-mtolia.svg)](https://github.com/moneytolia/otp-mtolia/issues) [![GitHub Pull Requests](https://img.shields.io/github/issues-pr/moneytolia/otp-mtolia.svg)](https://github.com/moneytolia/otp-mtolia/pulls) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

Demo (Stackblitz)

---

Intro

otp-gif

## 📝 Table of Contents - [About](#about) - [Getting Started](#getting_started) - [Usage](#usage) - [Built Using](#built_using) - [Contributing](../CONTRIBUTING.md) - [Authors](#authors) - [Acknowledgments](#acknowledgement)
## 🧐 About With this library, you can get a ready input where you can get your one-time passwords from the user and style it.

The user can fill in the input with a single button on the clipboard on ios devices.
## 🏁 Getting Started This package is made for reactjs. First, review the Prerequisites section below. And if there is a missing package in your project, install it. ### Prerequisites What things you need to install the software and how to install them. ``` npm i react ``` ``` npm i typescript ``` ### Installing Firstly, add the npm package to your project by typing the following line into the terminal. ``` npm i @moneytolia/otp-mtolia ``` ## 🎈 Usage ### With React Hook Form ```javascript import OtpInput from '@moneytolia/otp-mtolia'; import React from "react"; import { Controller, SubmitHandler, useForm } from "react-hook-form"; import styles from "../otp/otp.module.scss"; interface otpForm { otp: any; } export const OtpScreen = () => { //#region Form & Submit const { handleSubmit, formState: { errors, isSubmitted, isValid }, setValue, } = useForm({}); const onSubmit: SubmitHandler = (data) => { console.log(data); }; //#endregion //#region JSX return (

OTP Page

); //#endregion }; ```

	Key	Type	Default	Description
@Input	inputCount	number	4	Otp input count
@Input	inputClassName	string	""	You can style the input by assigning a value to the class name you have given to this field.
@Input	containerClassName	string	""	You can style the container by assigning a value to the class name you have given to this field.
@Input	value	string	""	You can set the initial value of the input or you can reset it to an empty string.
@Output	onChangedOtp	Function	-	Last value entered in the input

## ⛏️ Built Using - [ReactJS](https://react.dev/) - Framework - [styled-components](https://www.npmjs.com/package/styled-components) - Styling - [TypeScript](https://www.npmjs.com/package/typescript) ## ✍️ Authors - [@moneytolia](https://github.com/moneytolia) - Idea & Initial work - [@ercancan](https://github.com/lErcanl) - Developer - [@gizemay](https://github.com/gizemay96) - Developer - [@suayipdemirci](https://github.com/sypdmrc) - Developer - [@baranörek](https://github.com/BaranOrek) - Developer