From 44f08b73986f9f1ebc1b412e1131829043e8e1d4 Mon Sep 17 00:00:00 2001
From: Guilherme Rodz <gui.rodz.dev@gmail.com>
Date: Thu, 22 Feb 2024 13:21:49 -0300
Subject: [PATCH] docs: update README example

---
 README.md                                     | 21 ++++++++++++++++---
 .../(local-pages)/example-playground/code.tsx |  8 +++++--
 .../example-playground/component.tsx          |  8 +++++--
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 5945947..021a385 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,18 @@ https://github.com/guilhermerodz/input-otp/assets/10366880/753751f5-eda8-4145-a4
 npm install input-otp
 ```
 
-Then import `<OTPInput maxLength={6} render={()  => ()} />`
+Then import the component.
+
+```diff
++'use client'
++import { OTPInput } from 'input-otp'
+
+function MyForm() {
+  return <form>
++   <OTPInput maxLength={6} render={({slots})  => (...)} />
+  </form>
+}
+```
 
 ## Default example
 
@@ -41,7 +52,11 @@ import { OTPInput } from 'input-otp'
 />
 
 // Feel free to copy. Uses @shadcn/ui tailwind colors.
-function Slot(props: { char: string | null; isActive: boolean }) {
+function Slot(props: {
+  char: string | null;
+  isActive: boolean;
+  hasFakeCaret: boolean;
+}) {
   return (
     <div
       className={cn(
@@ -55,7 +70,7 @@ function Slot(props: { char: string | null; isActive: boolean }) {
       )}
     >
       {props.char !== null && <div>{props.char}</div>}
-      {props.char === null && props.isActive && <FakeCaret />}
+      {props.hasFakeCaret && <FakeCaret />}
     </div>
   )
 }
diff --git a/apps/website/src/app/(local-pages)/example-playground/code.tsx b/apps/website/src/app/(local-pages)/example-playground/code.tsx
index 829ad9b..0d2b4b3 100644
--- a/apps/website/src/app/(local-pages)/example-playground/code.tsx
+++ b/apps/website/src/app/(local-pages)/example-playground/code.tsx
@@ -27,7 +27,11 @@ import { OTPInput } from 'input-otp'
 />
 
 // Feel free to copy. Uses @shadcn/ui tailwind colors.
-function Slot(props: { char: string | null; isActive: boolean }) {
+function Slot(props: {
+  char: string | null;
+  isActive: boolean;
+  hasFakeCaret: boolean;
+}) {
   return (
     <div
       className={cn(
@@ -41,7 +45,7 @@ function Slot(props: { char: string | null; isActive: boolean }) {
       )}
     >
       {props.char !== null && <div>{props.char}</div>}
-      {props.char === null && props.isActive && <FakeCaret />}
+      {props.hasFakeCaret && <FakeCaret />}
     </div>
   )
 }
diff --git a/apps/website/src/app/(local-pages)/example-playground/component.tsx b/apps/website/src/app/(local-pages)/example-playground/component.tsx
index 50900a0..ebee96e 100644
--- a/apps/website/src/app/(local-pages)/example-playground/component.tsx
+++ b/apps/website/src/app/(local-pages)/example-playground/component.tsx
@@ -31,7 +31,11 @@ export function ExampleComponent() {
 }
 
 // Feel free to copy. Uses @shadcn/ui tailwind colors.
-function Slot(props: { char: string | null; isActive: boolean }) {
+function Slot(props: {
+  char: string | null
+  isActive: boolean
+  hasFakeCaret: boolean
+}) {
   return (
     <div
       className={cn(
@@ -45,7 +49,7 @@ function Slot(props: { char: string | null; isActive: boolean }) {
       )}
     >
       {props.char !== null && <div>{props.char}</div>}
-      {props.char === null && props.isActive && <FakeCaret />}
+      {props.hasFakeCaret && <FakeCaret />}
     </div>
   )
 }