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) => (