React Hooks
This is a collection of frequently used react hooks to support development within baidu, contributions from community are also welcomed.
Project structure
This is a typical pnpm workspace based monorepo, each hook creates a package in packages folder, the folder name is dash-cased and without the use prefix.
Package name must comform a format of @huse/foo-bar.
Each package should named export at least one hook like:
import {useInputValue} from '@huse/input-value';Unit tests are recommended, they are placed inside src/__tests__ folder with an extension of .test.js, we highly recommend a 100% of branch coverage.
Document
By now we are unable to publish document online since docz build fails, you can find description to package in its README.md, or to start a document site locally.
pnpm install
npm run doc:dev
Open http://localhost:3000 to view documents about hooks.
All hooks
| Hook | Description |
|---|---|
| useActionPending | Add a pending indicator to any async function |
| useBoolean | Methods to control a boolean state |
| useSwitch | More convenient way to use boolean state |
| useToggle | More convenient way to toggle boolean state or setState directly |
| useClickOutside | Trigger callback when clicks outside a specific element |
| useArray | Methods to control array state |
| useSet | Methods to control Set state |
| useMap | Methods to control Map state |
| useDebouncedEffect | Debounce an effect on value change |
| useDebouncedValue | Debounce a value change |
| useDebouncedCallback | Debounce a callback function |
| useRenderTimes | Return times of component rendered |
| useChangeTimes | Return times of a value changed |
| useUpdateCause | Observe the cause of component update |
| useDerivedState | Derive a state from external prop |
| useDocumentEvent | Add listeners to document's event |
| useDocumentTitle | Change document.title |
| useEffectRef | More reliable function based ref with clean-up ability |
| useElementResize | Trigger callback when element resize |
| useElementSize | Return element's size |
| useHover | Observe mouse enter and leave to element |
| useImmerReducer | A useReducer with immer support (deprecated) |
| useImmerState | A useState with immer support (deprecated) |
| useInfiniteScroll | Encapsulate methods and props to implement infinite scroll |
| useInputValue | Bound a value and it's change handler to input element |
| useOnScreenCallback | Trigger callback when element intersects with viewport |
| useOnScreen | Return whether element intesects with viewport |
| useOnScreenLazyValue | Lazy initialize a value when it intersects with viewport |
| useLocalStorage | Visit and update local storage |
| useMedia | Return whether a media query is currently matched |
| usePreferDarkMode | Return whether user prefers dark color scheme |
| useMergedRef | Merge multiple ref into a single one |
| useMethodsNative | Wrap methods around a state |
| useMethodsExtensionNative | Wrap methods around a setState function |
| useMethods | useMethodsNative with immer support |
| useMethodsExtension | useMethodsNative with immer support |
| useOnLine | Return user is current online of offline |
| useCounter | Methods to control a number state with increment and decrement |
| usePerformanceTiming | Collect performance data and send to callback |
| useLayoutTiming | Collect timings of a component's layout |
| usePoll | Periodically trigger an async function and manage its response |
| usePreviousValue | Get previous version of a value |
| usePreviousEquals | Return whether a value is equals to that on previous render |
| useOriginalCopy | Track back a value to get a reference equals copy when content are identical |
| useOriginalDeepCopy | useOriginalCopy with deep equal support |
| useRequestCallback | Return a function to trigger request with its data, error and pending state |
| useRequest | Trigger request on params change and return its data, error and pending state |
| useScript | Load an external script |
| useScriptSuspense | Load an external script with suspense |
| useScrollIntoView | Scroll an element into viewport |
| useScrollLock | Lock scroll of document |
| useScrollPosition | Get current scroll top and left |
| useScrollTop | Get current scroll top |
| useScrollLeft | Get current scroll left |
| useSelection | Manage state to work with list selection, including multiple and range selection |
| useSnapshotState | Get a state with undo and redo support |
| useTimeout | Trigger callback after specified time |
| useInterval | Trigger callback periodically |
| useStableInterval | useInterval but counts ellapsed time of function execution, both sync and async |
| useTransitionState | A state which will revert back to its initial value when updated |
| useForceUpdate | Force update a component |
| useWindowSize | Get the size of window |
| useOptimisticFactory | Infrastructure hook to create optimistic state |
| useOptimisticState | Optimistic state |
| useOptimisticTask | Wrap async task to have optimistic result |
| useUserMedia | Open video and audio streams in browser |
| useNavigate | Get a function to navigate to any location |
| useLocationState | Wrap location's state into a react state |
| useSearchParams | Parse search string to URLSearchParams as well as a function to update search |
| useSearchParam | Get a single search param |
| useSearchParamAll | Get a single search param as array |
| useUpdateSearchParams | Get a function to update search params |
| useSearchParamState | Wrap a single search param into a react state |
| useWebSocket | Create a web socket connecting to specified url |