@codsod/react-native-otp-input

A customizable OTP input component for React Native, designed to simplify user authentication through one-time passwords. This package offers an intuitive interface and flexible functionality, making it ideal for mobile applications.

Features

• Easy-to-Use API: Quickly integrate OTP input functionality into your applications.
• Customizable Length: Specify the number of input fields for your OTP.
• Cross-Platform Support: Optimized for both iOS and Android devices, as well as desktop web.
• Seamless Focus Management: Automatically shifts focus between input fields, enhancing user experience.
• TypeScript Support: Fully typed for better development experience and error checking.

Installation

To install the package, use npm or yarn:

1npm install @codsod/react-native-otp-input

Complete Example:

1import React, { useState } from "react";
2import OTPInput from "@codsod/react-native-otp-input";
3import { StyleSheet, Text, View } from "react-native";
4
5const Home = () => {
6  const [otp, setOTP] = useState("");
7
8  return (
9    <View style={styles.container}>
10      <OTPInput
11        length={4}
12        onOtpComplete={(txt: string) => setOTP(txt)}
13        inputStyle={styles.otpInput}
14      />
15    </View>
16  );
17};
18const styles = StyleSheet.create({
19  container: {
20    flex: 1,
21    justifyContent: "center",
22    alignItems: "center",
23  },
24  otpInput: {
25    backgroundColor: "blue",
26    color: "white",
27    width: 60,
28    height: 60,
29    fontSize: 20,
30  },
31});
32export default Home;

Props

Prop	Type	Description	Default
length	number	The number of input fields for the OTP.	4
onOtpComplete	Function	Callback fired when the OTP input is complete, receiving the entered OTP.	-
style	style	Custom styles for the OTP container.	-
inputStyle	style	Custom styles for each input field.	-

Key Changes and Improvements

1. Title and Description: Adjusted the title and description to focus on OTP input functionality instead of chat interfaces.

2. Features Section: Clearly listed relevant features that are specific to OTP input, highlighting usability and flexibility.

3. Installation and Usage: Improved the example code for clarity and usability. Included more context in the example for better understanding.

4. Props Table: Corrected the descriptions of props to accurately reflect their purposes.

5. Contribution and License Sections: Added these sections to encourage community engagement and clarify the licensing.

Conclusion

Feel free to modify any sections further to better align with your branding or preferences. This README should provide a solid foundation for users to understand and utilize your OTP input component effectively! If you have any more requests or need further assistance, let me know!