From a4b9b028ae48e27906d123748af447e09e413220 Mon Sep 17 00:00:00 2001
From: Riri <Daydreamerriri@outlook.com>
Date: Tue, 9 Apr 2024 01:35:57 +0800
Subject: [PATCH] docs: update readme

---
 README.md                             | 117 ++++++++++++++++++++++++++
 docs/pages/docs/useListTransition.mdx |   1 -
 2 files changed, 117 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 58c5277..9b43b77 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,123 @@
 [![JSDocs][jsdocs-src]][jsdocs-href]
 [![License][license-src]][license-href]
 
+Extremely light-weight react transition hooks which is simpler and easier to use than react-transition-group.
+
+## Features
+
+- State-driven, supports react-dom and react-native
+- Hooks style, easy to use
+- Tiny: ~1KB each hook and no dependencies
+- Support view transition for list transition
+
+## Documentation
+
+See [Documentation](https://transition-hooks.netlify.app/).
+
+Awesome documentation station is under construction!
+
+## Usage
+
+### useTransition
+
+```tsx
+function Demo() {
+  const [show, setShow] = useState(false)
+  const { status, shouldMount } = useTransition(show)
+
+  return shouldMount
+    ? (
+      <div
+        style={{
+          transition: 'opacity 0.3s',
+          opacity: (status === 'entering' || status === 'entered')
+            ? 1
+            : 0,
+        }}
+      >
+        Hello Word
+      </div>
+      )
+    : null
+}
+```
+
+### useSwitchTransition
+
+```tsx
+function Demo() {
+  const [count, setCount] = useState(0)
+  const { transition } = useSwitchTransition(count, { mode: 'default' })
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>add</button>
+      {transition((count, { simpleStatus }) => (
+        <p style={{
+          transition: '.3s',
+          opacity: simpleStatus === 'enter' ? 1 : 0,
+          transform: {
+            from: 'translateX(-100%)',
+            enter: 'translateX(0%)',
+            exit: 'translateX(100%)',
+          }[simpleStatus]
+        }}
+        >{count}
+        </p>
+      ))}
+    </div>
+  )
+}
+```
+
+### useListTransition
+
+```tsx
+function Demo() {
+  const [list, setList] = useState(numbers)
+  const { transitionList } = useListTransition(list)
+
+  return (
+    <div>
+      <ul>
+        {transitionList((item, { simpleStatus }) => {
+          return (
+            <li
+              style={{
+                opacity: simpleStatus === 'enter' ? 1 : 0,
+                transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
+                transition: 'all 300ms',
+              }}
+            >
+              - {item}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+```
+
+### `StatusState`
+
+```ts
+interface StatusState {
+  status: 'entered' | 'from' | 'entering' | 'exiting' | 'exited'
+  simpleStatus: 'from' | 'enter' | 'exit'
+  shouldMount: boolean
+  isEnter: boolean
+  notExit: boolean
+  isResolved: boolean
+}
+```
+
+See the documentation(https://transition-hooks.netlify.app/) for more usage.
+
+## Credits
+
+All credit goes to [iamyoki](https://github.com/iamyoki) for initiating [transition-hook](https://github.com/iamyoki/transition-hook). Since the project is not currently active and does not support react18, I will continue to maintain the project.
+
 ## License
 
 [MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)
diff --git a/docs/pages/docs/useListTransition.mdx b/docs/pages/docs/useListTransition.mdx
index 1cb3ced..9eb6046 100644
--- a/docs/pages/docs/useListTransition.mdx
+++ b/docs/pages/docs/useListTransition.mdx
@@ -48,7 +48,6 @@ export function BasicUseListTransition() {
           )
         })}
       </ul>
-      {}
     </div>
   )
   function insert() {