Skip to content

Commit 8a9b1aa

Browse files
committed
docs: fix context example
1 parent d8ba00d commit 8a9b1aa

File tree

1 file changed

+12
-5
lines changed

1 file changed

+12
-5
lines changed

README.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -425,19 +425,26 @@ NOTE: this also affects the selected caret position after a touch/click.
425425
+import { OTPInputContext } from 'input-otp'
426426

427427
function MyForm() {
428-
+ const inputContext = React.useContext(OTPInputContext)
429428
return (
430429
<OTPInput
431430
- // First remove the `render` prop
432431
- render={...}
433432
>
434-
+ {/* Then consume context */}
433+
<OTPInputWrapper />
434+
</OTPInput>
435+
)
436+
}
437+
438+
+function OTPInputWrapper() {
439+
+ const inputContext = React.useContext(OTPInputContext)
440+
+ return (
441+
+ <>
435442
+ {inputContext.slots.map((slot, idx) => (
436443
+ <Slot key={idx} {...slot} />
437444
+ ))}
438-
+ </OTPInput>
439-
)
440-
}
445+
+ </>
446+
+ )
447+
+}
441448
```
442449

443450
NOTE: this also affects the selected caret position after a touch/click.

0 commit comments

Comments
 (0)