Support onPaste event handler (#415)

* Adds onPaste handler * Updates README.md * Updates event type * Update readme * Update README.md Co-authored-by: Prateek Surana <[email protected]> * Update src/index.tsx Co-authored-by: Prateek Surana <[email protected]> --------- Co-authored-by: Prateek Surana <[email protected]>
devfolioco · Sep 26, 2023 · 6084e4a · 6084e4a
1 parent bb9dbc2
commit 6084e4a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git 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
@@ -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}>