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() {
console.log |
Returns OTP code typed in inputs. |
+
+ onPaste |
+ function |
+ false |
+ none |
+ Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
+
+ Example:
+
+const handlePaste: React.ClipboardEventHandler = (event) => {
+ const data = event.clipboardData.getData('text');
+ console.log(data)
+};
+
+ |
+
value |
string / number |
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) => 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 = ({
{Array.from({ length: numInputs }, (_, index) => index).map((index) => (