Support onPaste event handler

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>

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}>