Guide
Reference
Roadmap
Guide
Reference
Roadmap

🏃 Get Started

react-use-icon
NPM VersionBiome BadgeVersion Badge

@shined/react-use aims to reshape the new programming paradigm of React development. It enhances development efficiency, fosters better programming habits, and reduces the reliance on useEffect and useState by offering a multitude of high-quality, semantic Hooks. It encourages developers to gradually adapt to a React development (programming) paradigm that prioritizes 'Hooks first'.

Fundamentally, it's a SSR (Server-Side Rendering) friendly, comprehensive, and highly optimized React Hooks library that provides flexible and efficient Hook solutions, entirely developed in TypeScript, and comes with interactive documentation filled with rich examples đŸ”Ĩ.

It's primarily inspired by VueUse, while also drawing from react-use, ahooks, and many other outstanding libraries within the community. Special thanks to the open-source community, especially the authors of the aforementioned libraries, for their exceptional work and inspiration.

🚀 Features

  • Flexibility: Dependencies Collection、ElementTarget, Ref Getter, Pausable, and more.
  • Tree-shakable: Designed and delivered with ESM, import only what you need.
  • Interactive Documentation: Interactive documentation with live examples and Playground.
  • Lightweight: Boasts zero dependencies.
  • SSR-friendly: Ensures that all Hooks are compatible with Server-side Rendering (SSR).
  • First-class TypeScript Support: Written in TypeScript with well-named type definitions and JSDoc Comment.
  • Comprehensive Testing: (Coming soon...)

Visit the Get Started section to explore how it can be integrated into your project.

⚡ī¸ Optimizations

  • Safe State: Implements a safe state strategy for all stateful Hooks, reducing bugs and unwanted behaviors.
  • Stable functions: Every exported function benefits from stabilization by default.
  • Latest State: Avoids the expired closure issues by using latest state internally.
  • Reduced Unnecessary Rerenders: Use Pausable instance to control the behavior of some Hooks optionally.

đŸ“Ļ Installation

Install using your favorite package manager:

npm
yarn
pnpm
bun
npm install @shined/react-use

🎨 Usage Examples

Below is an example of how to use the useAsyncFn Hook:

function App() { const { loading, error, run } = useAsyncFn(fetchData) return ( <> <div>{data}</div> <button onClick={run} disabled={loading}>Fetch</button> </> ) }
Loading:
false
Value:
click to fetch

Next, you can proceed to the Usage Guide to learn how to improve existing code, or visit the Hooks List to see all available Hooks.