Skip to content

An elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.

License

Notifications You must be signed in to change notification settings

SectionTN/otp-input

Repository files navigation

🗝️ OTP Text Input

An elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.

  • ✍ Written in TypeScript.
  • 📱 Supports Android / iOS / Web.
  • 🎨 Highly customizable.
  • 🚀 Easy to use.
  • 🍃 Lightweight.
  • 📏 Fully responsive.
  • 🌐 Supports RTL.
  • 🌛 Supports Dark Mode.
  • 💅 Supports custom styles.
  • 🎹 Supports custom keyboard types.

📸 Screenshots

These screenshots show the OTP Text Input in action, with different styles and configurations. taken from the example project below.

screeenshot_one screeenshot_one screeenshot_one

🎞️ Gifs

Advanced Usage

Web Demo Gif: Web Gif

💻 Installation

NPM:

npm install @sectiontn/otp-input

YARN:

yarn add @sectiontn/otp-input

➕ Imports

Import the OTP component from the @sectiontn/otp-input package and use it in your React Native application.

import { OTPTextInput } from '@sectiontn/otp-input';

You may need to import type OTPTextViewHandle to use the ref on the component (if you use TypeScript).

import { OTPTextInput, type OTPTextInputHandle } from '@sectiontn/otp-input';
// Later in your component.
const OTPRef = useRef<OTPTextInputHandle | null>(null);

♻ Usage

Call the OTPTextInput component in your JSX code and pass the required props to customize the OTP input field.

import { Platform } from 'react-native';

// later in your component's render

<OTPTextInput
  ref={OTPRef}
  inputCount={4}
  tintColor={"#FF6F61"}
  offTintColor={"#BBBCBE"}
  onTextChangeHandler={(pin: string) => {
    console.log('Current OTP:', pin);
  }}
  editable={true}
  autoFocus={true}
  keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
/>

🧱 Props

There's no required prop as you can see, if you pass an empty props eg, <OTPTextInput />, the component will work with the default values.

Prop name Type Default Value Description
defaultValue string " " The default value for the OTP input
inputCount number 4 The number of OTP input fields
tintColor string '#566193' The color of the focused OTP input field
offTintColor string '#DADADA' The color of the non-focused OTP input fields
inputMaxLength number 1 The maximum length of each OTP input field
containerStyle object {} The custom style for the OTP container component
textInputStyle object {} The custom style for the OTP text inputs
onTextChangeHandler function undefined Call back function to handle OTP text change
onBlur function undefined Called when an input field loses focus
onFocus function undefined Called when an input field gets focus
keyboardType KeyboardTypeOptions 'numeric' Determines the type of keyboard to be displayed
editable boolean true Determines whether or not the OTP input is editable
autoFocus boolean true Determines whether or not the first input field should automatically get focus
useNumbersRegex boolean true If true, the input will be validated against a default number-based regex
useCustomRegex boolean false If true, a custom regex set by customRegex prop will be used for validation
customRegex RegExp '\d*' This provides the custom regex for input validation when useCustomRegex is true.

NB: you cannot use both useNumbersRegex and useCustomRegex at the same time.

🔍 Example

Full Example: Check the example at OTP Input Example made with react-native-cli.

Advanced Usage: Expo Snack Demo

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📜 License GPLv3 license.

Copyright (C) 2024 Mohamed Rayen Sbai

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

❤️ Support

sectiontn

Made with create-react-native-library

About

An elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published