Introduction#
@shined/react-use is a React Hooks library that is SSR (Server-Side Rendering) friendly, comprehensive, and highly optimized, providing flexible and efficient hook solutions. It is developed entirely in TypeScript and comes with interactive documentation 🔥 that includes rich examples.
It is inspired by VueUse, while also drawing inspiration from react-use, ahooks, and many other excellent libraries in the community. Special thanks to the open-source community, especially the authors of the aforementioned libraries, for their outstanding work and inspiration.
🚀 Features#
- Flexibility: Features include ElementTarget, Ref Getter, Pausable, and more.
- Tree-shakable optimization: Designed and delivered using ESM, only import what you need.
- Interactive documentation: Comes with live examples and a Playground.
- Lightweight: Proudly declares zero dependencies.
- SSR friendly: Ensures compatibility of all hooks with Server-Side Rendering (SSR).
- First-class TypeScript support: Written in TypeScript, with well-named type definitions and JSDoc comments.
Comprehensive testing: (Coming soon...)
⚡️ Optimization#
- Safe state: Implements a safe state strategy for all stateful hooks, reducing bugs and unwanted behavior.
- Function stability: By default, each exported function benefits from stabilization, one of the internal rendering optimizations.
- Latest state: Avoids stale closure issues by using latest state internally.
- Reduced unnecessary re-renders: Uses Pausable instances to optionally control the behavior of certain hooks.
Others#
Modern technology selection, standardized repository configuration#
- Mainstream pnpm + monorepo architecture, source code coexists with documentation and example projects.
- Use .node-version and packageManager to lock Node.js and package manager versions.
- Use tsup for source code building, powered by esbuild, lightweight and fast.
- Use Biome for project linting and formatting, a modern tool based on Rust.
- Use Vitest for testing, modern and efficient, with a focus on ESM.
- Use Docusaurus for documentation writing + UnoCSS for documentation demo.
- Configure GitHub Actions, including CI (lint), Release, and GitHub Pages processes standardization.
- Configure npm's provenance publishing authentication to avoid supply chain attacks.
- Use bumpp for version control, a one-stop solution for version bumping, tagging, committing, and pushing.
- Use conventional-changelog-cli to automatically generate changelog (
CHANGELOG.md). - Use changelogithub to standardize releases (generate and publish GitHub Releases based on commit messages).
- Standardize package.json, including but not limited to exports, sideEffects, typesVersions, etc.
- Configure clean-pkg-json to execute before publishing, ensuring a clean and standardized package.json.
- ...
Solid foundation for underlying, basic Hooks, while serving upper-level features#
- useSafeState => Implements a state behavior that is safe and in line with official recommendations, with additional support for deep compare.
- useStableFn => Stable function references for exported Hooks, one of the internal rendering optimizations.
- useTargetElement => Unified handling of all ElementTarget parameters for simplified element targeting.
- usePausable => Supports the pausable feature at the underlying level of various Hooks, one of the optional internal rendering optimizations.
- useSupported => Unified accessibility status for APIs with compatibility issues.
- useEventListener => Handles event operations for various instances that conform to the event interface.
- useLatest => Avoids stale closure issues by applying a stable Ref.
- useEffect-derived Hooks (create-xxx-effect) as underlying dependencies.
- ...