feat: components

build.config.ts

@@ -7,6 +7,9 @@ export default defineBuildConfig({
     'src/hooks/useSwitchTransition/index.tsx',
     'src/hooks/useListTransition.tsx',
     'src/viewTransition.ts',
+    'src/components/Transition.tsx',
+    'src/components/SwitchTransition.tsx',
+    'src/components/ListTransition.tsx',
   ],
   externals: ['react', 'react-dom'],
   declaration: true,

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "packageManager": "pnpm@8.15.5",
-  "description": "☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group",
+  "description": "Extremely light-weight react transition hooks which is simpler and easier to use than react-transition-group",
   "author": "Riri <Daydreamerriri@outlook.com>",
   "license": "MIT",
   "homepage": "https://github.com/Daydreamer-riri/transition-hooks#readme",
@@ -43,6 +43,18 @@
     "./viewTransition": {
       "import": "./dist/viewTransition.mjs",
       "require": "./dist/viewTransition.cjs"
+    },
+    "./Transition": {
+      "import": "./dist/components/Transition.mjs",
+      "require": "./dist/components/Transition.cjs"
+    },
+    "./SwitchTransition": {
+      "import": "./dist/components/SwitchTransition.mjs",
+      "require": "./dist/components/SwitchTransition.cjs"
+    },
+    "./ListTransition": {
+      "import": "./dist/components/ListTransition.mjs",
+      "require": "./dist/components/ListTransition.cjs"
     }
   },
   "main": "./dist/index.cjs",
@@ -52,7 +64,8 @@
     "*": {
       "*": [
         "./dist/*",
-        "./dist/index.d.mts"
+        "./dist/hooks/*",
+        "./dist/components/*"
       ]
     }
   },

src/components/ListTransition.tsx

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

src/components/SwitchTransition.tsx

@@ -0,0 +1,14 @@
+import type { SwitchRenderCallback, SwitchTransitionOptions } from '../hooks/useSwitchTransition'
+import { useSwitchTransition } from '../hooks/useSwitchTransition'
+
+interface SwitchTransitionProps<T> {
+  state: T
+  transitionOptions?: SwitchTransitionOptions
+  children: SwitchRenderCallback<T>
+}
+
+export function SwitchTransition<T>(props: SwitchTransitionProps<T>) {
+  const { transition } = useSwitchTransition(props.state, props.transitionOptions)
+
+  return transition(props.children)
+}

src/hooks/useListTransition.tsx

@@ -6,7 +6,7 @@ import type { Timeout } from '../helpers/getTimeout'
 import { getTimeout } from '../helpers/getTimeout'
 import useMemoizedFn from '../helpers/useMemorizeFn'
 
-type RenderCallback<Item> = (item: Item, stage: StatusState & { key: string | number }) => React.ReactNode
+export type ListRenderCallback<Item> = (item: Item, stage: StatusState & { key: string | number }) => React.ReactNode
 
 type ItemWithState<Item> = {
   item: Item
@@ -18,7 +18,7 @@ interface ItemWithKey<Item> {
   index: number
 }
 
-interface ListTransitionOptions<Item> {
+export interface ListTransitionOptions<Item> {
   timeout: Timeout
   entered?: boolean
   keyExtractor?: (item: Item) => string | number
@@ -150,7 +150,7 @@ export function useListTransition<Item>(list: Array<Item>, options?: ListTransit
     [list, listState, enterTimeout, exitTimeout, entered, keyExtractor, hasCustomKeyExtractor, viewTransition],
   )
 
-  function transitionList(renderCallback: RenderCallback<Item>) {
+  function transitionList(renderCallback: ListRenderCallback<Item>) {
     return listState.map(item => (
       <Fragment key={item.key}>
         {renderCallback(item.item, item)}

src/hooks/useSwitchTransition/index.tsx

@@ -1,12 +1,33 @@
 import React, { Fragment, useRef, useState } from 'react'
-import type { ListItem, SwitchTransitionOptions } from '../../types'
+import type { TransitionOptions } from '../../types'
 import type { StatusState } from '../../status'
 import { STATUS, getState } from '../../status'
+import type { Timeout } from '../../helpers/getTimeout'
 import { useDefaultMode } from './useDefaultMode'
 import { useOutInMode } from './useOutInMode'
 import { useInOutMode } from './useInOutMode'
 
-type RenderCallback<S> = (state: S, statusState: StatusState & { prevState?: S, nextState?: S }) => React.ReactNode
+export type SwitchTransitionOptions = Omit<TransitionOptions, 'onStatusChange' | 'from' | 'enter' | 'exit' | 'initialEntered'> & { mode?: Mode }
+
+export type Mode = 'default' | 'out-in' | 'in-out'
+export interface ModeHookParam<S> {
+  state: S
+  timeout: Timeout
+  mode?: Mode
+  keyRef: React.MutableRefObject<number>
+  list: ListItem<S>[]
+  setList: React.Dispatch<React.SetStateAction<ListItem<S>[]>>
+}
+
+export type SwitchRenderCallback<S> = (state: S, statusState: StatusState & { prevState?: S, nextState?: S }) => React.ReactNode
+
+export type ListItem<S> = {
+  state: S
+  key: number
+} & {
+  prevState?: S
+  nextState?: S
+} & StatusState
 
 export function useSwitchTransition<S>(state: S, options?: SwitchTransitionOptions) {
   const {
@@ -33,7 +54,7 @@ export function useSwitchTransition<S>(state: S, options?: SwitchTransitionOptio
 
   const isResolved = list.every(item => item.isResolved)
 
-  function transition(renderCallback: RenderCallback<S>) {
+  function transition(renderCallback: SwitchRenderCallback<S>) {
     return list.map(item => (
       <Fragment key={item.key}>
         { renderCallback(item.state, item)}

src/hooks/useSwitchTransition/useDefaultMode.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
-import type { ListItem, ModeHookParam } from '../../types'
 import { STATUS, getState } from '../../status'
 import { nextTick } from '../../helpers/setAnimationFrameTimeout'
 import { getTimeout } from '../../helpers/getTimeout'
+import type { ListItem, ModeHookParam } from './index'
 
 export function useDefaultMode<S>({
   state,

src/hooks/useSwitchTransition/useInOutMode.ts

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react'
-import type { ModeHookParam } from '../../types'
 import { STATUS, getState } from '../../status'
 import type { Canceller } from '../../helpers/setAnimationFrameTimeout'
 import { clearAnimationFrameTimeout, setAnimationFrameTimeout } from '../../helpers/setAnimationFrameTimeout'
 import { getTimeout } from '../../helpers/getTimeout'
+import type { ModeHookParam } from './index'
 
 export function useInOutMode<S>({
   state,

src/hooks/useSwitchTransition/useOutInMode.ts

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react'
-import type { ModeHookParam } from '../../types'
 import { STATUS, getState } from '../../status'
 import type { Canceller } from '../../helpers/setAnimationFrameTimeout'
 import { clearAnimationFrameTimeout, setAnimationFrameTimeout } from '../../helpers/setAnimationFrameTimeout'
 import { getTimeout } from '../../helpers/getTimeout'
+import type { ModeHookParam } from './index'
 
 export function useOutInMode<S>({
   state,

src/index.ts

@@ -1,6 +1,8 @@
 export { useTransition } from './hooks/useTransition'
 export { useSwitchTransition } from './hooks/useSwitchTransition/index'
+export type { Mode, SwitchRenderCallback, SwitchTransitionOptions } from './hooks/useSwitchTransition/index'
 export { useListTransition } from './hooks/useListTransition'
+export type { ListRenderCallback, ListTransitionOptions } from './hooks/useListTransition'
 export { Transition } from './components/Transition'
 export * from './types'
 export { getSimpleStatus } from './status'

src/types.ts

@@ -1,5 +1,4 @@
-import type { Timeout } from './helpers/getTimeout'
-import type { Stage, StatusState } from './status'
+import type { Stage } from './status'
 
 export interface TransitionOptions {
   /**
@@ -19,24 +18,3 @@ export interface TransitionOptions {
   entered?: boolean
   onStatusChange?: (status: Stage) => void
 }
-
-export type SwitchTransitionOptions = Omit<TransitionOptions, 'onStatusChange' | 'from' | 'enter' | 'exit' | 'initialEntered'> & { mode?: Mode }
-
-export type Mode = 'default' | 'out-in' | 'in-out'
-
-export type ListItem<S> = {
-  state: S
-  key: number
-} & {
-  prevState?: S
-  nextState?: S
-} & StatusState
-
-export interface ModeHookParam<S> {
-  state: S
-  timeout: Timeout
-  mode?: Mode
-  keyRef: React.MutableRefObject<number>
-  list: ListItem<S>[]
-  setList: React.Dispatch<React.SetStateAction<ListItem<S>[]>>
-}

src/viewTransition.ts

@@ -3,12 +3,6 @@ import { flushSync } from 'react-dom'
 const isClient = typeof window !== 'undefined'
 const isSupportViewTransition = isClient && 'startViewTransition' in document
 
-const noop = (fn: any) => fn()
-
-export function viewTransition() {
-
-}
-
 export function startViewTransition(fn: () => void) {
   if (isSupportViewTransition) {
     // @ts-expect-error startViewTransition is not in the type definition