docs: fix context example

guilhermerodz · Mar 16, 2024 · 8a9b1aa · 8a9b1aa
1 parent d8ba00d
commit 8a9b1aa
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -425,19 +425,26 @@ NOTE: this also affects the selected caret position after a touch/click.
 +import { OTPInputContext } from 'input-otp'
 
 function MyForm() {
-+ const inputContext = React.useContext(OTPInputContext)
   return (
     <OTPInput
 -     // First remove the `render` prop
 -     render={...}
     >
-+     {/* Then consume context */}
+      <OTPInputWrapper />
+    </OTPInput>
+  )
+}
+
++function OTPInputWrapper() {
++ const inputContext = React.useContext(OTPInputContext)
++ return (
++   <>
 +     {inputContext.slots.map((slot, idx) => (
 +       <Slot key={idx} {...slot} />
 +     ))}
-+   </OTPInput>
-  )
-}
++   </>
++ )
++}
 ```
 
 NOTE: this also affects the selected caret position after a touch/click.