diff --git a/packages/input-otp/src/input.tsx b/packages/input-otp/src/input.tsx index 5277b67..311b9e6 100644 --- a/packages/input-otp/src/input.tsx +++ b/packages/input-otp/src/input.tsx @@ -24,6 +24,7 @@ export const OTPInput = React.forwardRef( inputMode = 'numeric', onComplete, pushPasswordManagerStrategy = 'increase-width', + pasteTransformer, containerClassName, noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK, @@ -311,11 +312,15 @@ export const OTPInput = React.forwardRef( const _pasteListener = React.useCallback( (e: React.ClipboardEvent) => { const input = inputRef.current - if (!initialLoadRef.current.isIOS || !e.clipboardData || !input) { + if (!pasteTransformer && (!initialLoadRef.current.isIOS || !e.clipboardData || !input)) { return } - - const content = e.clipboardData.getData('text/plain') + + const _content = e.clipboardData.getData('text/plain') + const content = pasteTransformer + ? pasteTransformer(_content) + : _content + console.log({_content,content}) e.preventDefault() const start = inputRef.current?.selectionStart diff --git a/packages/input-otp/src/types.ts b/packages/input-otp/src/types.ts index ad81e96..0af3b24 100644 --- a/packages/input-otp/src/types.ts +++ b/packages/input-otp/src/types.ts @@ -22,6 +22,7 @@ type OTPInputBaseProps = OverrideProps< onComplete?: (...args: any[]) => unknown pushPasswordManagerStrategy?: 'increase-width' | 'none' + pasteTransformer?: (pasted: string) => string containerClassName?: string