A set of smart React hooks for performant UIs (React 18+)
npm install @webeach/react-hooksπΊπΈ English version | π·πΊ Π ΡΡΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΡ
ΠΠ°Π±ΠΎΡ ΡΠΌΠ½ΡΡ ReactβΡ ΡΠΊΠΎΠ² Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ² (React 18+)
---
- ΠΠ΅Π½ΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΎΠΊ. Π₯ΡΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ: Π»Π΅Π½ΠΈΠ²ΡΠ΅ ΡΠ»Π°Π³ΠΈ, ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΡΡΠ»ΠΊΠΈ.
- ΠΠΈΠ±ΡΠΈΠ΄Π½ΡΠΉ Π²ΠΎΠ·Π²ΡΠ°Ρ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Ρ
ΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΡΡΠ΅ΠΆ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡ β Π²ΡΠ±ΠΈΡΠ°ΠΉΡΠ΅ ΡΠΎΡΠΌΠ°Ρ ΠΏΠΎΠ΄ Π·Π°Π΄Π°ΡΡ.
- ΠΠΊΠΊΡΡΠ°ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ. ΠΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΈ ΠΎΡΠΈΡΡΠΊΠ° ΡΠ΅ΡΡΡΡΠΎΠ² Π½Π°ΡΡΡΠΎΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎ.
- ΠΠΎΠ»Π½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ SSR. Π₯ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ API ΡΡΡΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ².
---
``bash`
npm install @webeach/react-hooks
ΠΈΠ»ΠΈ
`bash`
pnpm install @webeach/react-hooks
ΠΈΠ»ΠΈ
`bash`
yarn add @webeach/react-hooks
---
ES Modules
`ts
import { useBoolean } from '@webeach/react-hooks/useBoolean';
import { useEffectCompare } from '@webeach/react-hooks/useEffectCompare';
import { useWindowEvent } from '@webeach/react-hooks/useWindowEvent';
// ΠΈΠ»ΠΈ
import { useBoolean, useEffectCompare, useWindowEvent } from '@webeach/react-hooks';
`
CommonJS
`ts
const { useBoolean } = require('@webeach/react-hooks/useBoolean');
const { useEffectCompare } = require('@webeach/react-hooks/useEffectCompare');
const { useWindowEvent } = require('@webeach/react-hooks/useWindowEvent');
// ΠΈΠ»ΠΈ
const { useBoolean, useEffectCompare, useWindowEvent } = require('@webeach/react-hooks');
`
). Π’Π°ΠΊΠΎΠΉ ΠΈΠΌΠΏΠΎΡΡ ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΡΠΉ ΠΊΠΎΠ΄ β ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠΉ ΠΈ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π»ΡΠ±ΡΡ
Π±Π°Π½Π΄Π»Π΅ΡΠΎΠ² (ESM ΠΈ CJS).
- ΠΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠΌΠΏΠΎΡΡ ΠΈΠ· ΠΊΠΎΡΠ½Ρ (@webeach/react-hooks) ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ treeβshaking Π² ΡΠ±ΠΎΡΡΠΈΠΊΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΡΡ ESβΠΌΠΎΠ΄ΡΠ»ΠΈ (Vite/Rollup/esbuild/Webpack 5 Π² production). ΠΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΡ Π±ΡΠ΄ΡΡ ΡΠ΄Π°Π»Π΅Π½Ρ Π½Π° ΡΡΠ°ΠΏΠ΅ ΡΠ±ΠΎΡΠΊΠΈ.
- ΠΠ»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π½Π° CommonJS ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΡΠΎΡΠ΅ΡΠ½ΡΠ΅ ΠΈΠΌΠΏΠΎΡΡΡ ΠΏΠΎ ΠΏΡΡΠΈ ΠΌΠΎΠ΄ΡΠ»Ρ (require('@webeach/react-hooks/useX')), ΡΡΠΎΠ±Ρ Π½Π΅ ΡΡΠ½ΡΡΡ Π»ΠΈΡΠ½ΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΠ΅ΡΠ΅Π· ΠΈΠ½Π΄Π΅ΠΊΡ.---
π Π‘ΠΏΠΈΡΠΎΠΊ Ρ
ΡΠΊΠΎΠ²
$3
+ useAsyncCallback
+ useAsyncHandler
+ useBoolean
+ useCallbackCompare
+ useCollection
+ useControlled
+ useDebounceCallback
+ useDebounceState
+ useDemandStructure
+ useDeps
+ useDOMEvent
+ useEffectCompare
+ useForceUpdate
+ useFrame
+ useFrameExtended
+ useImageLoader
+ useIntersectionObserver
+ useIsomorphicLayoutEffect
+ useLayoutEffectΠ‘ompare
+ useLiveRef
+ useLocalStorage
+ useLoop
+ useMap
+ useMediaQuery
+ useMemoCompare
+ useNumber
+ useOutsideEvent
+ usePageTitle
+ usePageVisibility
+ usePatchDeepState
+ usePatchState
+ useRefEffect
+ useRefState
+ useResizeObserver
+ useSessionStorage
+ useSet
+ useStatus
+ useThrottleCallback
+ useThrottleState
+ useTimeout
+ useTimeoutExtended
+ useToggle
+ useUnmount
- useViewportBreakpoint
+ useWindowEvent
$3
#### Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β ΠΏΡΠΎΡΡΡΠ΅ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Ρ
- useControlled
- useBoolean
- useNumber
- useToggle
- useStatus
#### Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ
- usePatchDeepState
- usePatchState
#### Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ
- useCollection
- useMap
- useSet
#### Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° (ΠΏΠ΅ΡΡΠΈΡΡΠ΅Π½ΡΠ½ΠΎΡΡΡ)
- useLocalStorage
- useSessionStorage
#### Π’Π°ΠΉΠΌΠ΅ΡΡ, ΡΠΈΠΊΠ»Ρ ΠΈ ΠΊΠ°Π΄ΡΡ
- useFrame
- useFrameExtended
- useLoop
- useTimeout
- useTimeoutExtended
#### ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΎΡΡ (throttle/debounce)
- useDebounceCallback
- useDebounceState
- useThrottleCallback
- useThrottleState
#### ΠΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ
- useAsyncCallback
- useAsyncHandler
- useImageLoader
#### ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ
- useDeps
- useCallbackCompare
- useEffectCompare
- useLayoutEffectCompare
- useMemoCompare
- useIsomorphicLayoutEffect
#### ΠΠΈΠ·Π½Π΅Π½Π½ΡΠΉ ΡΠΈΠΊΠ»
- useEffectCompare
- useLayoutEffectCompare
- useUnmount
#### Π Π΅ΡΡ
- useLiveRef
- useRefEffect
#### Π‘ΠΎΠ±ΡΡΠΈΡ
- useDOMEvent
- useWindowEvent
- useOutsideEvent
#### ΠΠ°Π±Π»ΡΠ΄Π°ΡΠ΅Π»ΠΈ (Observers)
- useIntersectionObserver
- useResizeObserver
#### Π‘ΡΡΠ°Π½ΠΈΡΠ°/Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
- useMediaQuery
- usePageTitle
- usePageVisibility
- useViewportBreakpoint
#### Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅
- useDemandStructure
- useForceUpdate
- useRefState
---
π§© ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΡ Π²Π½Π΅ΡΠ½ΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ β @webeach/collection.
- ΠΡΠ° Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ
ΡΠΊΠΎΠΌ
useCollection.
- ΠΡΠΎΡΠΈΠ΅ Ρ
ΡΠΊΠΈ Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΡΡ ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ collection.---
π ΠΡΠΏΡΡΠΊ Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ
Π Π΅Π»ΠΈΠ·Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
semantic-release.ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ±Π΅Π΄ΠΈΡΡ, ΡΡΠΎ:
1. ΠΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π°ΠΊΠΎΠΌΠΌΠΈΡΠ΅Π½Ρ ΠΈ Π·Π°ΠΏΡΡΠ΅Π½Ρ Π² Π²Π΅ΡΠΊΡ
main.
2. Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΌΠΈΡΠΎΠ² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠΎΡΠΌΠ°ΡΡ Conventional Commits:
- feat: ... β Π΄Π»Ρ Π½ΠΎΠ²ΡΡ
ΡΠΈΡ
- fix: ... β Π΄Π»Ρ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π±Π°Π³ΠΎΠ²
- chore: ..., refactor: ... ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠΏΡ β ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ
3. ΠΠ΅ΡΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΈΠΏΠ° ΠΊΠΎΠΌΠΌΠΈΡΠΎΠ² (patch, minor, major`).---
Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°: Π ΡΡΠ»Π°Π½ ΠΠ°ΡΡΡΠ½ΠΎΠ²
ΠΡΠ»ΠΈ Ρ ΡΠ΅Π±Ρ Π΅ΡΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π½Π°ΠΉΠ΄Π΅Π½ Π±Π°Π³, ΠΎΡΠΊΡΡΠ²Π°ΠΉ issue ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠΉ pull request.
---
ΠΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT.