From a4ae5301e2d7cb89e809af05b3b214b0480a1583 Mon Sep 17 00:00:00 2001
From: Su-Yong <simssy2205@gmail.com>
Date: Sun, 25 Aug 2024 17:43:13 +0900
Subject: [PATCH] chore(deps): update `README.md`

---
 README.md                  | 24 ++++++++++++++++++++----
 examples/basic/src/App.tsx |  8 ++++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ca38d5f..362c29b 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ npm install solid-flip
    
     const [show, setShow] = createSignal(false);
    
-    <Flip id={'my-flip-id'} with={show()}> // set `with` property that will be used to determine whether the content should be animated
+    <Flip id={'my-flip-id'} with={show()}> // set `with` property that will be used to determine when the content should be animated
       <div class={show() ? 'show' : 'hidden'}>Animated content</div>
     </Flip>
     ```
@@ -132,9 +132,25 @@ https://github.com/user-attachments/assets/0547a512-7032-4cce-940f-512de78538ef
 </div>
 ```
 
-# Usage
+# API
+## FlipProvider
+`FlipProvider` component is used to wrap the root component of your application. It provides the context for the flip animation.
+If you don't wrap your root component with `FlipProvider`, the flip animation will not work.
+
 ## Flip
-> TODO
+`Flip` component is used to wrap the content that you want to animate. It directly passes children.
+
+| Property   | Type                   | Default      | Description                                                    |
+|------------|------------------------|--------------|----------------------------------------------------------------|
+| id         | `string`               | _(required)_ | The unique id of the flip component                            |
+| with       | `unknown \| unknown[]` | []           | The condition to determine when the content should be animated |
+| duration   | `number`               | 300          | The duration of the animation                                  |
+| easing     | `string`               | 'ease'       | The easing of the animation                                    |
+| properties | `string \| string[]`   | []           | The additional properties that will be animated                |
 
 ## Unflip
-> TODO
+`Unflip` component is used to warp the content that ignore parent flip animation. It directly passes children.
+
+| Property | Type     | Default | Description                            |
+|----------|----------|---------|----------------------------------------|
+| id       | `string` | -       | A parent id that ignore flip animation |
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
index 6e9124e..bea13df 100644
--- a/examples/basic/src/App.tsx
+++ b/examples/basic/src/App.tsx
@@ -57,10 +57,14 @@ export const App = () => {
       </section>
 
       <section>
-        <h1>Flip with <code>Property(with)</code></h1>
+        <h1>Flip with <code>Property(with)</code> + Unflip</h1>
         <Flip id={'flip2'} with={flip2()}>
           <div class={flip2() ? 'card blue fullscreen' : 'card red'} onClick={() => setFlip2(!flip2())}>
-            {flip2() ? 'Click Again!' : 'Click!'}
+            <Unflip>
+              <div>
+                {flip2() ? 'Click Again!' : 'Click!'}
+              </div>
+            </Unflip>
           </div>
         </Flip>
       </section>