From 6084e4a68d9e9ea5ab6cb0c6a931c68123c90921 Mon Sep 17 00:00:00 2001
From: Steve Domino <domino.steve@gmail.com>
Date: Tue, 26 Sep 2023 10:47:26 -0600
Subject: [PATCH] Support onPaste event handler (#415)

* Adds onPaste handler

* Updates README.md

* Updates event type

* Update readme

* Update README.md

Co-authored-by: Prateek Surana <prateeksurana3255@gmail.com>

* Update src/index.tsx

Co-authored-by: Prateek Surana <prateeksurana3255@gmail.com>

---------

Co-authored-by: Prateek Surana <prateeksurana3255@gmail.com>
---
 README.md     | 16 ++++++++++++++++
 src/index.tsx |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/README.md b/README.md
index a49d938..5efb379 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,22 @@ export default function App() {
     <td>console.log</td>
     <td>Returns OTP code typed in inputs.</td>
   </tr>
+  <tr>
+    <td>onPaste</td>
+    <td>function</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
+    </br></br>
+    Example:
+    <pre>
+const handlePaste: React.ClipboardEventHandler<HTMLDivElement> = (event) => {
+  const data = event.clipboardData.getData('text');
+  console.log(data)
+};</pre>
+
+  </td>
+  </tr>
   <tr>
     <td>value</td>
     <td>string / number</td>
diff --git a/src/index.tsx b/src/index.tsx
index 0fd3a27..612619b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,6 +32,8 @@ interface OTPInputProps {
   numInputs?: number;
   /** Callback to be called when the OTP value changes */
   onChange: (otp: string) => void;
+  /** Callback to be called when pasting content into the component */
+  onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
   /** Function to render the input */
   renderInput: (inputProps: InputProps, index: number) => React.ReactNode;
   /** Whether the first input should be auto focused */
@@ -54,6 +56,7 @@ const OTPInput = ({
   value = '',
   numInputs = 4,
   onChange,
+  onPaste,
   renderInput,
   shouldAutoFocus = false,
   inputType = 'text',
@@ -217,6 +220,7 @@ const OTPInput = ({
     <div
       style={Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle)}
       className={typeof containerStyle === 'string' ? containerStyle : undefined}
+      onPaste={onPaste}
     >
       {Array.from({ length: numInputs }, (_, index) => index).map((index) => (
         <React.Fragment key={index}>