From 9aea043d172b74797ea57d9c2528cc0898741a20 Mon Sep 17 00:00:00 2001
From: David Wesker <rayensbai2@gmail.com>
Date: Thu, 21 Mar 2024 03:22:46 +0100
Subject: [PATCH] docs: add docs

---
 README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 0c5621d..1b3c54f 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,65 @@
-# @sectiontn/otp-input
+# 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.
+
 ## Installation
 
 ```sh
 npm install @sectiontn/otp-input
 ```
+OR
+```sh
+yarn add @sectiontn/otp-input
+```
 
-## Usage
+## Imports
+
+Import the `OTP` component from the `@sectiontn/otp-input` package and use it in your React Native application.
+
+```typescript jsx
+import { OTPTextInput } from '@sectiontn/otp-input';
+```
+
+You may need to import type `OTPTextViewHandle` to use the `ref` on the component.
 
-```js
-import { multiply } from '@sectiontn/otp-input';
+```typescript jsx
+import { OTPTextInput, type OTPTextViewHandle } from '@sectiontn/otp-input';
+```
+## Usage
+Call the `OTPTextInput` component in your JSX code and pass the required props to customize the OTP input field.
 
-// ...
+```typescript jsx
+import { Platform } from 'react-native';
 
-const result = await multiply(3, 7);
+<OTPTextInput
+  inputCount={4}
+  tintColor={"#FF6F61"}
+  offTintColor={"#BBBCBE"}
+  onTextChangeHandler={(pin: string) => {
+    console.log('Current OTP:', pin);
+  }}
+  keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+/>
 ```
 
+## Example
+
+Full Example: Check the example at [OTP Input Example](https://github.com/SectionTN/otp-input-example) made with react-native-cli.
+<br>
+<br>
+Advanced Usage: [Expo Snack Demo](https://snack.expo.dev/@sectiontn/otptextinput-advanced-example)
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.