docs: components

docs/pages/docs/ListTransition.mdx

@@ -0,0 +1,32 @@
+# ListTransition
+
+## Example
+
+```tsx
+<ul>
+  <ListTransition list={list}>
+    {(item, { simpleStatus }) => (
+      <li
+        style={{
+          transition: '.3s',
+          opacity: simpleStatus === 'enter' ? 1 : 0,
+          transform: {
+            from: 'translateX(-100%) scale(1.2)',
+            enter: 'translateX(0)',
+            leave: 'translateX(100%) scale(0)',
+          }[simpleStatus],
+        }}
+      >
+        {item}
+      </li>
+    )}
+  </ListTransition>
+</ul>
+```
+
+## Type
+
+```ts
+function ListTransition<T>(props: ListTransitionProps<T>): JSX.Element
+
+```

docs/pages/docs/SwitchTransition.mdx

@@ -0,0 +1,30 @@
+# SwitchTransition
+
+## Example
+
+```tsx
+  <SwitchTransition state={count} timeout={300} mode="default">
+    {(state, { simpleStatus }) => (
+      <h1
+        style={{
+          transition: '.3s',
+          opacity: simpleStatus === 'enter' ? 1 : 0,
+          transform: {
+            from: 'translateX(-100%) scale(1.2)',
+            enter: 'translateX(0)',
+            leave: 'translateX(100%) scale(0)',
+          }[simpleStatus],
+        }}
+      >
+        {state} {simpleStatus} hello
+      </h1>
+    )}
+  </SwitchTransition>
+```
+
+## Type
+
+```ts
+function SwitchTransition<T>(props: SwitchTransitionProps<T>): JSX.Element
+
+```

docs/pages/docs/Transition.mdx

@@ -0,0 +1,32 @@
+# Transition
+
+## Example
+
+```tsx
+const [onOff, setOnOff] = useState(true)
+
+return (
+  <div>
+    <button onClick={() => setOnOff(!onOff)}>toggle</button>
+    <Transition state={onOff} timeout={300}>
+      {({ simpleStatus, shouldMount }) => shouldMount && (
+        <p style={{
+          transition: '.3s',
+          opacity: simpleStatus === 'enter' ? 1 : 0,
+        }}
+        >
+          I'm fading
+        </p>
+      )}
+    </Transition>
+  </div>
+)
+
+```
+
+## Type
+
+```ts
+function Transition(props: TransitionProps): React.ReactNode
+
+```

docs/pages/docs/useListTransition.mdx

@@ -69,3 +69,39 @@ export function BasicUseListTransition() {
 :::
 
 If you want to use `view transition`, the keyExtractor argument must be set.
+
+## API
+
+### `useListTransition`
+
+```ts
+function useListTransition<Item>(list: Array<Item>, options?: ListTransitionOptions<Item>): {
+  transitionList: (renderCallback: ListRenderCallback<Item>) => JSX.Element[]
+  isResolved: boolean
+}
+```
+
+### `ListTransitionOptions`
+
+```ts
+interface ListTransitionOptions<Item> {
+  timeout: Timeout
+  entered?: boolean
+  keyExtractor?: (item: Item) => string | number
+  viewTransition?: (fn: () => void) => void
+}
+```
+
+### `ListRenderCallback`
+
+```ts
+export type ListRenderCallback<Item> = (
+  item: Item,
+  stage: StatusState & { key: string | number }
+) => React.ReactNode
+
+```
+
+### `StatusState`
+
+See [useTransition#StatusState](/docs/useTransition#statusstate)

docs/pages/docs/useSwitchTransition.mdx

@@ -68,5 +68,13 @@ interface SwitchTransitionOptions {
 ### `SwitchRenderCallback`
 
 ```ts
-export type SwitchRenderCallback<S> = (state: S, statusState: StatusState & { prevState?: S, nextState?: S }) => React.ReactNode
+export type SwitchRenderCallback<S> = (
+  state: S,
+  statusState: StatusState & { prevState?: S, nextState?: S }
+) => React.ReactNode
+
 ```
+
+### `StatusState`
+
+See [useTransition#StatusState](/docs/useTransition#statusstate)

eslint.config.js

@@ -12,6 +12,8 @@ export default ririd(
     rules: {
       'style/no-multiple-empty-lines': 'off',
       'unused-imports/no-unused-vars': 'off',
+      'react-hooks/rules-of-hooks': 'off',
+      'react/no-unescaped-entities': 'off',
     },
   },
 )

package.json

@@ -81,7 +81,7 @@
     "release": "bumpp && npm publish",
     "typecheck": "tsc --noEmit",
     "docs:dev": "vocs dev",
-    "docs:build": "vocs build",
+    "docs:build": "npm run build && vocs build",
     "docs:preview": "vocs preview"
   },
   "peerDependencies": {

src/components/ListTransition.tsx

@@ -1,14 +1,14 @@
 import type { ListRenderCallback, ListTransitionOptions } from '../hooks/useListTransition'
 import { useListTransition } from '../hooks/useListTransition'
 
-interface SwitchTransitionProps<T> {
+interface ListTransitionProps<T> {
   list: T[]
   transitionOptions?: ListTransitionOptions<T>
   children: ListRenderCallback<T>
 }
 
-export function SwitchTransition<T>(props: SwitchTransitionProps<T>) {
+export function ListTransition<T>(props: ListTransitionProps<T>) {
   const { transitionList } = useListTransition(props.list, props.transitionOptions)
 
-  return transitionList(props.children)
+  return <>{transitionList(props.children)}</>
 }

src/components/SwitchTransition.tsx

@@ -10,5 +10,5 @@ interface SwitchTransitionProps<T> {
 export function SwitchTransition<T>(props: SwitchTransitionProps<T>) {
   const { transition } = useSwitchTransition(props.state, props.transitionOptions)
 
-  return transition(props.children)
+  return <>{transition(props.children)}</>
 }

src/index.ts

@@ -4,5 +4,7 @@ export type { Mode, SwitchRenderCallback, SwitchTransitionOptions } from './hook
 export { useListTransition } from './hooks/useListTransition'
 export type { ListRenderCallback, ListTransitionOptions } from './hooks/useListTransition'
 export { Transition } from './components/Transition'
+export { SwitchTransition } from './components/SwitchTransition'
+export { ListTransition } from './components/ListTransition'
 export * from './types'
 export { getSimpleStatus } from './status'

vocs.config.ts

@@ -7,6 +7,15 @@ export default defineConfig({
     pattern: 'https://github.com/Daydreamer-riri/transition-hooks/edit/main/docs/pages/:path',
     text: 'Suggest changes to this page',
   },
+  socials: [
+    {
+      icon: 'github',
+      link: 'https://github.com/Daydreamer-riri/transition-hooks',
+    },
+  ],
+  topNav: [
+    { text: 'Guide & API', link: '/docs', match: '/docs' },
+  ],
   sidebar: [
     {
       text: 'Getting Started',
@@ -34,5 +43,22 @@ export default defineConfig({
         },
       ],
     },
+    {
+      text: 'Components',
+      items: [
+        {
+          text: 'Transition',
+          link: '/docs/Transition',
+        },
+        {
+          text: 'SwitchTransition',
+          link: '/docs/SwitchTransition',
+        },
+        {
+          text: 'ListTransition',
+          link: '/docs/ListTransition',
+        },
+      ],
+    },
   ],
 })