@satyam-seth/otp-field
v1.0.5
Published
A configurable OTP field built using TypeScript and SCSS
Downloads
3
Maintainers
Readme
OTP Field Package
A customizable and easy-to-use OTP (One-Time Password) input field component for web applications. This package allows seamless integration of an OTP input field, with support for various features such as validation, theming, and accessibility.
Table of Contents
Features
Configurable box count
: Define the number of input boxes for the OTP field.Input validation
: Restricts input to single characters and validates them based on the configured value - type (numeric, alphabetic, alphabetic lower, alphabetic upper, alphanumeric, alphanumeric lower, alphanumeric upper) or a custom regular expression.User interaction handling
: Manages user interactions like input, paste, and keyboard events for smooth navigation and value management within the input boxes.Focus management
: Automatically focuses on the appropriate input box based on user actions.Clear function
: Clears all input boxes and resets the internal state.Destroy function
: Removes the OTP field element from the DOM.
Installation
Install the package via npm:
npm i @satyam-seth/otp-field
Install the package via npm:
yarn add @satyam-seth/otp-field
Usage
- Import the
OTPField
class:
import { OTPField } from 'otp-field';
- Define the configuration for your OTP field:
const otpFieldConfig = {
namespace: 'otp', // Namespace for IDs (used for styling)
boxCount: 6, // Number of input boxes
// valueType: OTPValueType.NUMERIC, // Input type (numeric, alphabetic, alphanumeric)
// customRegex: /your_custom_regex/, // Custom validation regex
// onPasteBlur: true, // Blur the input box after pasting (default: true)
};
- Create an instance of the OTPField class with the configuration:
const otpField = new OTPField(otpFieldConfig);
- Build the OTP field and append it to the desired element in your DOM:
const containerElement = document.getElementById('otp-container');
otpField.build(containerElement);
- Access the current OTP value entered by the user:
const otpValue = otpField.value;
- SCSS import for styling:
@import '../../node_modules/@satyam-seth/otp-field/src/scss/field';
@include otp-field;
- Note: You can apply CSS classes like
error
,success
, andwarning
to thediv.otp-field
container for state-specific theming.
API Reference
value
: Retrieves the current value of the OTP input field.id
: Gets the unique identifier for the OTP field.isDisabled
: Retrieves the disabled state of the OTP input fields.element
: Gets the DOM element associated with the OTP field.focus()
: Sets focus on the first empty OTP input box. If all boxes are filled, focus is set to the last box.clear()
: Clears all OTP input boxes and resets the stored field value.disable(disabled: boolean)
: Disables or enables OTP input fields based on the provided boolean value.build(parentElement: HTMLElement)
: Builds the OTP field and appends it to the specified parent element.destroy()
: Removes the OTP field element from the DOM.
Example
You can check out the example here
License
This package is licensed under the MIT License. See the LICENSE file for details.
Contributing
Feel free to open issues or submit pull requests for improvements or bug fixes!