File tree Expand file tree Collapse file tree 1 file changed +12
-5
lines changed Expand file tree Collapse file tree 1 file changed +12
-5
lines changed Original file line number Diff line number Diff line change @@ -425,19 +425,26 @@ NOTE: this also affects the selected caret position after a touch/click.
425
425
+ import { OTPInputContext } from 'input-otp'
426
426
427
427
function MyForm() {
428
- + const inputContext = React.useContext(OTPInputContext)
429
428
return (
430
429
<OTPInput
431
430
- // First remove the `render` prop
432
431
- render={...}
433
432
>
434
- + {/* Then consume context */}
433
+ <OTPInputWrapper />
434
+ </OTPInput>
435
+ )
436
+ }
437
+
438
+ + function OTPInputWrapper() {
439
+ + const inputContext = React.useContext(OTPInputContext)
440
+ + return (
441
+ + <>
435
442
+ {inputContext.slots.map((slot, idx) => (
436
443
+ <Slot key={idx} {...slot} />
437
444
+ ))}
438
- + </OTPInput >
439
- )
440
- }
445
+ + </>
446
+ + )
447
+ + }
441
448
```
442
449
443
450
NOTE: this also affects the selected caret position after a touch/click.
You can’t perform that action at this time.
0 commit comments