English | 简体中文

Front-end business code tool library

Provide the commonly used React Hooks in the project, and the input and output functions do a special treatment to avoid closure problems, including a wealth of basic Hooks and refined from the business of advanced Hooks.

Install

npm i common-hook

yarn add common-hook

Demand Loading

Default support for ES Modules-based Tree Shaking

import { useMount, useUnmount } from "common-hook"

useMount(() => {
  console.log("useMount")
})
useUnmount(() => {
  console.log("useUnmount")
})

:package: API Documentation

Advanced Hooks

  useLatest    The returned value is always the latest

Dom Hooks

  useEventListener    Event Listener

  useTitle    Set page title

  useFavicon    Set page favicon

  useHover    Listen to DOM elements for mouse hover

  useMouse    Listen to mouse position

Effect Hooks

  useUpdateEffect    Not executed for the first time, only when dependencies are updated

  useDeepCompareEffect    When a dependency is updated, a deep comparison is performed

  useAsyncEffect    Support asynchronous functions

  useLockFn    Add a competing lock to an asynchronous function to prevent concurrent execution

  useDebounceEffect    useEffect + Debounce

  useDebounceFn    Hooks to handle debounce

  useThrottleEffect    useEffect + Throttle

  useThrottleFn    Hooks to handle debounce

  useInterval    Hooks to handle setInterval

  useTimeout    Hooks to handle setTimeout

LifeCycle Hooks

  useMount    Executed when the component is first rendered

  useUnmount    Execute on component unmount

State Hooks

  useSetState    Hooks to manage object type states

  useBoolean    Toggle boolean to receive default value

  useToggle    Hooks to switch between two state values

  useDebounce    Hook for handling debounce values

  useThrottle    Hook for handling throttle values

  useRafState    Update state only on requestAnimationFrame callback