Hooks
React hook library.
Features
- Supports React 16.8+, 17+ and 18+.
- Supports SSR.
- Supports React StrictMode.
- Supports network requests.
- Provides 50+ hooks.
Install
npm install --save @lilib/hooks
Example
import React from "react";
import { useLoad } from "@lilib/hooks";
function Example() {
const {data, error, loading} = useLoad(() => {
return fetch('/users/0').then(response => response.json())
})
...
}
Document
https://lilibraries.github.io/hooks/
Hooks
Category | Hook | Description |
---|---|---|
Effects |
useOnce
|
Run effect synchronously only once. |
useMount
|
Run effect after the component is mounted. | |
useUpdate
|
Run effect after the component is updated or the deps are changed, ignore on mount. | |
useUnmount
|
Run effect on the component unmount. | |
useTargetEffect
|
It accepts functions or refs as effect dependencies. It is useful when using DOM nodes as effect dependencies. | |
useLayoutMount
|
It's similar to
useMount
, except it uses
useIsomorphicLayoutEffect
internally.
|
|
useLayoutUpdate
|
It's similar to
useUpdate
, except it uses
useIsomorphicLayoutEffect
internally.
|
|
useLayoutTargetEffect
|
It's similar to
useTargetEffect
, except it uses
useIsomorphicLayoutEffect
internally.
|
|
useIsomorphicLayoutEffect
|
In the DOM environment, this hook is the same as React.useLayoutEffect. In the SSR environment, it is the same as React.useEffect. | |
States |
useCache
|
Cache data for a certain period of time. |
useToggle
|
Use boolean value. | |
useSetState
|
This hook is like this.setState method of class component.
|
|
useSafeState
|
Eliminate errors thrown by setting state when the component is unmounted. | |
useDelayedValue
|
Delay update a value. | |
useMemoizedValue
|
Return the previous value when the value has not changed. Use deep comparison by default. | |
useThrottledValue
|
Throttle a value. | |
useDebouncedValue
|
Debounce a value. | |
Callbacks |
useRaf
|
Invoke the callback before the browser repainting. |
useIdle
|
Invoke the callback when the browser is idle. | |
useTimeout
|
Delay running callback. | |
useInterval
|
Loop run callback. | |
useAnimation
|
Use this hook to perform JavaScript animation. | |
usePersist
|
Returns a function whose identifier never changes. | |
useRerender
|
Force rerender the component. | |
useThrottle
|
Use throttled callback. | |
useDebounce
|
Use debounced callback. | |
Refs |
useLatestRef
|
Return a ref object whose .current property is assigned to
latest updated value.
|
usePreviousRef
|
Return a ref object whose .current property is assigned to
previous updated value.
|
|
useComposedRef
|
This hook compose multiple refs into one. | |
useMountedRef
|
It returns a ref object that used to determine whether the component is mounted. | |
useUnmountedRef
|
It returns a ref object that used to determine whether the component is unmounted. | |
Browser |
useTitle
|
Set document title. |
useFavicon
|
Set document favicon. | |
useOnline
|
Detect whether the network is online. | |
useDarkMode
|
Detect whether the preferred color mode of the system is dark. | |
usePageVisible
|
Detect whether the page is visible. | |
useWindowFocus
|
Detect whether the window is focus. | |
useMatchMedia
|
Determine if the document matches the media query string. | |
useWindowSize
|
Get window size. | |
useElementSize
|
Get DOM element size. | |
useIntersecting
|
Determine whether two elements intersect. | |
useClickOutside
|
Trigger a callback when clicking outside the target area. | |
useEventListener
|
Set up the event listener to the target. | |
useResizeObserver
|
Observe a element size changing. | |
useIntersectionObserver
|
Observe whether two elements intersect. | |
useCookie
|
Get, set and/or remove cookies. | |
useLocalStorage
|
Get, set and/or remove localStorage .
|
|
useSessionStorage
|
Get, set and/or remove sessionStorage .
|
|
Requests |
useLoad
|
Load async data. |
useReload
|
Reload requests | |
useSubmit
|
Submit network requests | |
Configs |
LoadConfig
|
Provide default options for request hooks. |
CacheConfig
|
Config for
useCache
|
License
Code licensed MIT, docs CC BY 4.0.