Dev 0.x

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
 

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"

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'

packages/useAntdPagination/__tests__/index.test.ts → 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<typeof useAntdPagination>
+type Result = ReturnType<typeof usePagination>
 
 const response = { total: 100, list: [{ a: 1 }, { a: 2 }, { a: 3 }] }
 
@@ -13,12 +13,12 @@ const mockApi = (): Promise<Response> =>
     }, 10)
   })
 
-describe('useAntdPagination', () => {
+describe('usePagination', () => {
   let hook: RenderHookResult<Result, any>
 
-  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
 

packages/useAntdPagination/index.ts → 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<Response>
-  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<T extends DataItem = DataItem>(
-  options: Options
-) {
+export function usePagination<T extends DataItem = DataItem>(options: Options) {
   const optionsRef = useRef({ ...defaultOptions, ...options })
   const paginationRef = useRef({
     ...defaultPagination,