Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-pels/reactnative-otp-input
A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.
https://github.com/john-pels/reactnative-otp-input
android expo ios otp react-native reactjs typescript
Last synced: 3 months ago
JSON representation
A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.
- Host: GitHub
- URL: https://github.com/john-pels/reactnative-otp-input
- Owner: John-pels
- License: mit
- Created: 2024-09-18T08:41:15.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-25T09:44:03.000Z (3 months ago)
- Last Synced: 2024-10-01T16:54:33.434Z (3 months ago)
- Topics: android, expo, ios, otp, react-native, reactjs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-snap-otp
- Size: 112 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-snap-otp · [](https://github.com/John-pels/reactnative-otp-input/blob/main/LICENSE)
[](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)[](https://github.com/John-pels/reactnative-otp-input)[](https://github.com/John-pels/reactnative-otp-input/commits/main)[](https://img.shields.io/npm/dm/react-native-snap-otp.svg)
A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.
### Installation
For React-native CLI,
```bash
npm install react-native-snap-otp
```
```bash
cd ios
pod install
```
or
```bash
yarn add react-native-snap-otp
```
```bash
cd ios
pod install
```
For Expo App,
```bash
npx expo install react-native-snap-otp
```
### Basic Usage
```typescript
import React from 'react';
import RNOTPInput from 'react-native-snap-otp';
const [otp, setOtp] = React.useState('');
const handleOTPComplete = (otp: string) => {
setOtp(otp);
};
;
```
### Customization Examples
#### Custom styles
```typescript
```
### Props
| Props | Type | Default | Required | Description |
| -------------- | -------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------- |
| Length | Number | 4 | No | The number of OTP input fields, default is 4 |
| onCompleteFn | Function | \_ | Yes | Callback function called when all OTP fields are filled |
| inputStyle | StyleProp | width, height, borderWidth, borderColor, textAlign, fontSize | No | Custom styles for individual input fields |
| containerStyle | StyleProp | flexDirection, justifyContent | No | Custom styles for the container of input fields |
| focusStyle | StyleProp | \_ | No | The onFocus styles for the otp inputs |
## Features
- **Customizable Length: Set the number of OTP input fields as needed.**
- **Auto Focus: Automatically focuses on the next input field after entering a digit**
- **Backspace Support: Moves focus to the previous field when pressing backspace on an empty field.**
- **Customizable Styling: Apply custom styles to both individual input fields and the container.**
- **Completion Callback: Easily handle the completed OTP input with the onComplete callback.**
### Best Practices
1. **Error Handling**: Implement proper error handling and validation for the OTP input.
2. **Accessibility**: Ensure the component is accessible by testing with screen readers and adding appropriate labels.
3. **Security**: Never store or log the full OTP on the client-side for security reasons.
4. **Timeout**: Consider implementing a timeout feature for OTP validity.
5. **Resend Option**: Provide an option to resend the OTP if the user doesn't receive it.
### Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### License
This project is licensed under the MIT License.