From 4d8249f3895915331305f9b67c7f6ba79a531465 Mon Sep 17 00:00:00 2001 From: young Date: Sun, 25 May 2025 13:48:06 +0800 Subject: [PATCH 1/2] chore: update readme --- README.md | 59 ++++++++++++++++--- packages/index.ts | 2 +- .../__tests__/index.test.ts | 0 .../index.ts | 11 ++-- packages/useVisible/index.ts | 35 ----------- 5 files changed, 58 insertions(+), 49 deletions(-) rename packages/{useAntdPagination => usePagination}/__tests__/index.test.ts (100%) rename packages/{useAntdPagination => usePagination}/index.ts (94%) delete mode 100644 packages/useVisible/index.ts diff --git a/README.md b/README.md index ab97102..07e4403 100644 --- a/README.md +++ b/README.md @@ -5,18 +5,61 @@ ## Install -```bash -$ pnpm install +```sh +$ npm install @vainjs/hooks ``` -```bash -$ pnpm dev -$ pnpm build -``` +## Available Hooks + +### State Management + +- useDeepCompareValue - Compare values deeply and only update state when deep changes occur +- useLocalStorage - Persist state in localStorage +- useSessionStorage - Persist state in sessionStorage + +### Effects and Lifecycle + +- useDeepCompareEffect - Like useEffect but with deep comparison +- useDeepCompareLayoutEffect - Like useLayoutEffect but with deep comparison +- useUpdateEffect - Run an effect only on updates +- useUpdateLayoutEffect - Run a layout effect only on updates +- useMounted - Hook to check if component is mounted +- useUnmounted - Hook to execute code when component unmounts + +### Performance + +- useDebounce - Debounce a value +- useDebounceFn - Debounce a function +- useThrottle - Throttle a value +- useThrottleFn - Throttle a function +- useMemoize - Memoize values with custom comparison +- useDeepCompareMemo - Like useMemo with deep comparison + +### DOM and Events + +- useClickAway - Detect clicks outside an element +- useEventListener - Add event listeners declaratively +- useIntersectionObserver - Track element visibility +- useMutationObserver - Watch for DOM mutations +- useResizeObserver - Track element size changes + +### Timing + +- useInterval - Set intervals declaratively +- useTimeout - Set timeouts declaratively + +### Rendering + +- useBatchRender - Render large lists in batches +- useLazyRender - Lazy load and render content +- useWaterfallFlow - Create waterfall layout flows -## Options +### Utilities -TODO +- useLatest - Always get the latest value +- useLockFn - Prevent function from being called while it's running +- usePagination - Handle pagination logic +- useSearchParams - Handle URL search parameters ## LICENSE diff --git a/packages/index.ts b/packages/index.ts index 130feb2..d918541 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -5,7 +5,6 @@ export { useDeepCompareEffect } from './useDeepCompareEffect' export { useMutationObserver } from './useMutationObserver' export { useDeepCompareValue } from './useDeepCompareValue' export { useDeepCompareMemo } from './useDeepCompareMemo' -export { useAntdPagination } from './useAntdPagination' export { useDebounceEffect } from './useDebounceEffect' export { useSessionStorage } from './useSessionStorage' export { useThrottleEffect } from './useThrottleEffect' @@ -17,6 +16,7 @@ export { useSearchParams } from './useSearchParams' export { useBatchRender } from './useBatchRender' export { useDebounceFn } from './useDebounceFn' export { useThrottleFn } from './useThrottleFn' +export { usePagination } from './usePagination' export { useLazyRender } from './useLazyRender' export { useClickAway } from './useClickAway' export { useUnmounted } from './useUnmounted' diff --git a/packages/useAntdPagination/__tests__/index.test.ts b/packages/usePagination/__tests__/index.test.ts similarity index 100% rename from packages/useAntdPagination/__tests__/index.test.ts rename to packages/usePagination/__tests__/index.test.ts diff --git a/packages/useAntdPagination/index.ts b/packages/usePagination/index.ts similarity index 94% rename from packages/useAntdPagination/index.ts rename to packages/usePagination/index.ts index ebf3a34..389bd0f 100644 --- a/packages/useAntdPagination/index.ts +++ b/packages/usePagination/index.ts @@ -1,4 +1,3 @@ -import type { PaginationProps } from 'antd/lib/pagination' import type { DataItem } from '../utils/type' import { useState, useEffect, useCallback, useRef } from 'react' import { filterParams } from '../utils' @@ -17,7 +16,11 @@ export type Options = { transformResponse?: (response: Response) => Response transformRequest?: (request: Request) => Request request: (params?: Request) => Promise - pagination?: PaginationProps + pagination?: { + total: number + current: number + pageSize: number + } immediateRequest?: boolean initParams?: DataItem } @@ -37,9 +40,7 @@ const defaultOptions = { * default request params: { page: 1, pageSize: 10, param1: 'a', param2: 'b'} * default response data: { code: 0, message: 'ok', data: { list: [], total: 100 } } */ -export function useAntdPagination( - options: Options -) { +export function usePagination(options: Options) { const optionsRef = useRef({ ...defaultOptions, ...options }) const paginationRef = useRef({ ...defaultPagination, diff --git a/packages/useVisible/index.ts b/packages/useVisible/index.ts deleted file mode 100644 index ceeb4e0..0000000 --- a/packages/useVisible/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useCallback, useId, useMemo } from 'react' -import { useStore } from '../useStore' - -export function useVisibleState(visible?: boolean, namespace?: string) { - const [store, dispatch] = useStore() - const visibleName = `${namespace || location.pathname}${useId()}` - - const setOpen = useCallback( - (visible: boolean) => { - dispatch(visibleName, visible) - }, - [dispatch, visibleName] - ) - - return [store[visibleName] ?? visible, setOpen] as [ - boolean, - (visible: boolean) => void, - ] -} - -/** - * Is there a popup layer displayed in the current namespace - */ -export function useVisible(namespace?: string) { - const [store] = useStore() - const visibleNamePrefix = `${namespace || location.pathname}` - - return useMemo( - () => - Object.keys(store).some( - (k) => k.startsWith(visibleNamePrefix) && store[k] - ), - [store, visibleNamePrefix] - ) -} From d8e6dab50b0d129e8332c6519ec6bcb35a845547 Mon Sep 17 00:00:00 2001 From: young Date: Sun, 25 May 2025 15:52:35 +0800 Subject: [PATCH 2/2] chore(release): v0.0.2 --- package.json | 3 +-- packages/usePagination/__tests__/index.test.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index dce3da7..3715420 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vainjs/hooks", - "version": "0.0.1", + "version": "0.0.2", "description": "a silky react hooks library", "types": "dist/es/types/index.d.ts", "module": "dist/es/index.mjs", @@ -18,7 +18,6 @@ }, "type": "module", "sideEffects": false, - "packageManager": "pnpm@8.10.5", "engines": { "node": ">=16.0.0", "pnpm": ">=8.10.5" diff --git a/packages/usePagination/__tests__/index.test.ts b/packages/usePagination/__tests__/index.test.ts index f78efee..b82a251 100644 --- a/packages/usePagination/__tests__/index.test.ts +++ b/packages/usePagination/__tests__/index.test.ts @@ -1,8 +1,8 @@ import { RenderHookResult, renderHook, act } from '@testing-library/react' import { waitFor } from '@testing-library/react' -import { Response, useAntdPagination } from '../index' +import { Response, usePagination } from '../index' -type Result = ReturnType +type Result = ReturnType const response = { total: 100, list: [{ a: 1 }, { a: 2 }, { a: 3 }] } @@ -13,12 +13,12 @@ const mockApi = (): Promise => }, 10) }) -describe('useAntdPagination', () => { +describe('usePagination', () => { let hook: RenderHookResult - it('useAntdPagination should work', async () => { + it('usePagination should work', async () => { act(() => { - hook = renderHook(() => useAntdPagination({ request: mockApi })) + hook = renderHook(() => usePagination({ request: mockApi })) }) expect(hook.result.current.loading).toBe(true) expect(hook.result.current.pagination.total).toBe(0) @@ -32,9 +32,9 @@ describe('useAntdPagination', () => { }) let last: Result - it('useAntdPagination export methods keep immutable', () => { + it('usePagination export methods keep immutable', () => { act(() => { - hook = renderHook(() => useAntdPagination({ request: mockApi })) + hook = renderHook(() => usePagination({ request: mockApi })) }) last = hook.result.current