diff --git a/docs/components/BasicUseTransition/index.tsx b/docs/components/BasicUseTransition/index.tsx new file mode 100644 index 0000000..301b0f1 --- /dev/null +++ b/docs/components/BasicUseTransition/index.tsx @@ -0,0 +1,27 @@ +import { useState } from 'react' +import { useTransition } from 'transition-hooks' +import { Button } from '../Button' + +export function BasicUseTransition() { + const [show, setShow] = useState(false) + const { status, shouldMount } = useTransition(show) + + return ( +
+ {shouldMount + ? ( +
+ Hello Word +
+ ) + : null} + +

status: { status }

+
+ ) +} diff --git a/docs/components/Button.tsx b/docs/components/Button.tsx new file mode 100644 index 0000000..b9f818b --- /dev/null +++ b/docs/components/Button.tsx @@ -0,0 +1,4 @@ +export function Button(props: React.HTMLProps) { + const { type: _, ...rest } = props + return +

{ status }

+ + ) +} +``` + +::: + diff --git a/docs/pages/docs/useTransition.mdx b/docs/pages/docs/useTransition.mdx new file mode 100644 index 0000000..1332a6e --- /dev/null +++ b/docs/pages/docs/useTransition.mdx @@ -0,0 +1,94 @@ +# useTransition + +This hook transforms a boolean state into transition status, and unmount the component after timeout. + +import { BasicUseTransition } from "../../components/BasicUseTransition" + +:::code-group + +
+ +
+ +```tsx [Code] +import { useState } from 'react' +import { useTransition } from 'transition-hooks' + +export function BasicUseTransition() { + const [show, setShow] = useState(false) // [!code focus] + const { status, shouldMount } = useTransition(show) // [!code focus] + + return ( +
+ {shouldMount // [!code focus] + ? ( +
+ Hello Word +
+ ) + : null} + +

{ status }

+
+ ) +} +``` +::: + +## API + +### `useTransition` +```ts +function useTransition( + state: boolean, + transitionOptions?: TransitionOptions +): StatusState + +``` + +### `StatusState` + +```ts +type StatusState = { + status: "preEnter" | "entering" | "entered" | "preExit" | "exiting" | "exited" | "unmounted"; + shouldMount: boolean; + isEnter: boolean; + isResolved: boolean; +} +``` + +### `TransitionOptions` + +```ts +export interface TransitionOptions { + /** + * Add a 'preEnter' state immediately before 'entering', + * which is necessary to change DOM elements from unmounted + * or display: none with CSS transition (not necessary for CSS animation). + * @default true + */ + preEnter?: boolean + /** + * Add a 'preExit' state immediately before 'exiting' + * @default false + */ + preExit?: boolean + /** + * Set timeout in ms for transitions; + * you can set a single value or different values for enter and exit transitions. + * @default 300 + */ + timeout?: number | { enter: number, exit: number } + onStatusChange?: (status: Stage) => void + enter?: boolean + exit?: boolean +} +``` +import { useTransition } from "react" diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx new file mode 100644 index 0000000..7f02480 --- /dev/null +++ b/docs/pages/index.mdx @@ -0,0 +1,19 @@ +--- +title: Transition Hooks +showLogo: false +layout: landing +--- + +import { HomePage } from 'vocs/components' + + + + ☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group + + {/* Vocs is a minimal static documentation generator designed to supercharge your documentation workflow, built with modern web technologies. */} + + Get started + GitHub + + + diff --git a/docs/public/status.png b/docs/public/status.png new file mode 100644 index 0000000..a9daeb2 Binary files /dev/null and b/docs/public/status.png differ diff --git a/eslint.config.js b/eslint.config.js index 13d8226..175ad35 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,8 +1,4 @@ +// @ts-check import ririd from '@ririd/eslint-config' -export default ririd( - { - ignores: [ - ], - }, -) +export default ririd() diff --git a/package.json b/package.json index f1daa0d..425054e 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "0.0.1", "packageManager": "pnpm@8.15.5", - "description": "☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group", + "description": "☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group", "author": "Riri ", "license": "MIT", "homepage": "https://github.com/Daydreamer-riri/transition-hooks#readme", @@ -69,6 +69,7 @@ "react": "^18.2.0", "rimraf": "5.0.5", "simple-git-hooks": "^2.11.1", + "transition-hooks": "workspace:*", "typescript": "^5.4.3", "unbuild": "^2.0.0", "vite": "^5.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eeb1068..f00ab91 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 + transition-hooks: + specifier: workspace:* + version: 'link:' typescript: specifier: ^5.4.3 version: 5.4.3 diff --git a/src/hooks/useTransition.ts b/src/hooks/useTransition.ts index 20e15c0..38bfae4 100644 --- a/src/hooks/useTransition.ts +++ b/src/hooks/useTransition.ts @@ -7,6 +7,7 @@ import { setAnimationFrameTimeout, } from '../helpers/setAnimationFrameTimeout' import { getTimeout } from '../helpers/getTimeout' +import type { StatusState } from '../status' import { STATUS, getEndStatus, getState } from '../status' import type { Stage, TransitionOptions } from '../types' import useMemoizedFn from '../helpers/useMemorizeFn' @@ -79,5 +80,5 @@ export function useTransition(state: boolean, transitionOptions?: TransitionOpti useEffect(() => () => clearAnimationFrameTimeout(timer.current), []) - return statusState + return statusState as StatusState } diff --git a/src/types.ts b/src/types.ts index 87b95bc..bdc7f2d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,10 +3,22 @@ import type { STATUS } from './status' export type Stage = keyof typeof STATUS export interface TransitionOptions { + /** + * Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or display: none with CSS transition (not necessary for CSS animation). + * @default true + */ preEnter?: boolean + /** + * Add a 'preExit' state immediately before 'exiting' + * @default false + */ preExit?: boolean - enter?: boolean - exit?: boolean + /** + * Set timeout in ms for transitions; you can set a single value or different values for enter and exit transitions. + * @default 300 + */ timeout?: number | { enter: number, exit: number } onStatusChange?: (status: Stage) => void + enter?: boolean + exit?: boolean } diff --git a/vocs.config.ts b/vocs.config.ts index 35e8107..670cb7c 100644 --- a/vocs.config.ts +++ b/vocs.config.ts @@ -1,7 +1,30 @@ import { defineConfig } from 'vocs' export default defineConfig({ - description: `Build reliable apps & libraries with lightweight, - composable, and type-safe modules that interface with Ethereum.`, - title: 'Viem', + description: `☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group.`, + title: 'Transition-hooks', + editLink: { + pattern: 'https://github.com/Daydreamer-riri/transition-hooks/edit/main/docs/pages/:path', + text: 'Suggest changes to this page', + }, + sidebar: [ + { + text: 'Getting Started', + items: [ + { + text: 'Introduction', + link: '/docs', + }, + ], + }, + { + text: 'Hooks', + items: [ + { + text: 'useTransition', + link: '/docs/useTransition', + }, + ], + }, + ], })