A JavaScript library that provides a user-friendly way to input OTP (One-Time Password) codes. It can be used in various JavaScript frameworks or environments to enhance the OTP input experience.
You can install via npm:
npm install @rashidpathiiyil/otp-inputTo use @rashidpathiiyil/otp-input in your JavaScript application, import it and initialize it with the appropriate parameters. Below is an example setup:
import OTP from '@rashidpathiyil/otp-input';
const initOTPInput = new OTP(
'.otp-input-container',
'.otp-result-input'
);Define the HTML structure for the OTP input component. Below is an example:
<div class="otp-input-container">
<!-- Input fields for OTP -->
<input type="text" />
<!-- Add more input fields as required -->
</div>
<!-- Display OTP result -->
<input class="otp-result-input" type="text" />Below is an example of how you can use it in your Vue/Nuxt application:
<script setup>
import { onMounted, ref } from 'vue';
import OTP from '@rashidpathiyil/otp-input';
const result = ref();
onMounted(() => {
const initOTPInput = new OTP(
'.otp-input-container',
'.otp-result-input',
result
);
});
</script>
<template>
<div class="otp-input-container">
<!-- Input fields for OTP -->
<input type="text" />
<!-- Add more input fields as required -->
</div>
<!-- Display OTP result -->
<input class="otp-result-input" type="text" />
<!-- Display OTP using ref -->
{{ result }}
</template>You can try out a Vue.js demo on StackBlitz:
Vue.js Demo - @rashidpathiiyil/otp-input
For support or to contribute to the development of @rashidpathiiyil/otp-input, please visit the GitHub repository: https://github.com/rashidpathiiyil/otp-input
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent