A simple and customizable OTP (One-Time Password) input component built with React. This component allows users to input their OTP digit by digit, providing a smooth and user-friendly experience.
- Digit-by-Digit Input: Users can enter their OTP one digit at a time.
- Automatic Focus: Automatically moves focus to the next input field as the user types.
- Backspace Navigation: Allows users to navigate back to the previous input field when deleting digits.
- Customizable Length: Easily set the length of the OTP input.
- Switch Between OTP Digits: Shift focus between OTP input fields using the left and right arrow keys.
Before you begin, ensure you have met the following requirements:
- You have Node.js and npm installed on your machine. You can download them from nodejs.org.
- A basic understanding of React and JavaScript.
To get an development setup ready, follow these steps:
-
Clone the repository:
git clone https://github.com/Rahul8320/otp-input.git
-
Navigate to the project directory:
cd otp-input -
Install the dependencies:
npm install
-
Run the app:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. -
To ensure the integrity of the application, you can run the test suite using the following command:
npm test
The component comes with basic styles. You can customize the styles further by adding your own CSS classes or inline styles.
This project was developed using the following technologies:
- React: A JavaScript library for building user interfaces.
- JavaScript: The programming language used for the component logic.
- HTML/CSS: For structuring and styling the component.
- Jest: For writing and running unit tests.
Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.