> ✨ Simple, composable & accessible utilities for React development.
npm install @galiprandi/react-tools> ✨ Simple, composable & accessible utilities for React development.
*
* Overview
* Installation
* Components
* AsyncBlock
* Form
* Input
* DateTime
* Dialog
* Observer
* LazyRender
* Hooks
* useDebounce
* useTimer
* useList
* Accessibility & Performance
* FAQ
* License
*
@galiprandi/react-tools is a lightweight, dependency-free utility library for React. It provides reusable components and hooks to simplify development and improve accessibility — no configuration needed.
*
``bash`
npm install @galiprandi/react-toolsor
yarn add @galiprandi/react-toolsor
pnpm add @galiprandi/react-tools
*
*
Description\
Declarative component to render async data with loading, success, and error states. Automatically cancels in-flight requests when dependencies change.
Example
` Loading... Welcome {data.name} Error: {(err as Error).message}tsx/api/user).then(res => res.json())}`
pending={
success={(data) =>
error={(err) =>
timeOut={5000}
deps={[userId]}
/>
Props
| Prop | Type | Description |
|--------------|------------------------------------------|------------------------------------------|
| promiseFn | (signal?: AbortSignal) => Promise | Async function returning a Promise |pending
| | ReactNode \| () => ReactNode | UI while loading |success
| | (data: T) => ReactNode | UI on success |error
| | (err: unknown) => ReactNode | UI on error |timeOut
| | number | Optional timeout in ms |deps
| | any[] | Dependency list for re-execution |onSuccess
| | (data: T) => void | Optional success callback |onError
| | (err: unknown) => void | Optional error callback |
*
Description\
Enhanced