Getting Started

@lilib/hooks is a 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
# Or
yarn add @lilib/hooks
# Or
pnpm add @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());
  });
  ...
}

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 updating 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 async data.
	useSubmit	Submit network requests.
Configs	LoadConfig	Config component of request hooks.
	CacheConfig	Config component of useCache.

Changelog

https://github.com/lilibraries/hooks/blob/master/CHANGELOG.md

License

Code licensed MIT, docs CC BY 4.0.