|

This repository is NOT a reimplementation of React itself. It is a collection of reusable React hooks, utilities, and tools to enhance development productivity. 🎉

📚 Documentation

If you enjoy using it, please consider giving it a star! ⭐️

• 🚀 Lightweight and optimized hooks and utilities for React projects.
• 🗄️ SSR (Server-Side Rendering) compatible utilities.
• 📦 Fully typed with TypeScript for better developer experience.
• 🔒 Clean and consistent utilities for DOM, state, and async operations.
• ✅ 100% (almost) test coverage with robust testing using Vitest.

Install the package via npm, yarn, pnpm, bun, or deno from JSR:

# With npm
npm install @zl-asica/react
# With yarn
yarn add @zl-asica/react
# With pnpm
pnpm add @zl-asica/react
# With bun
bun add @zl-asica/react
# With deno
deno add jsr:@zl-asica/react

// With deno from JSR
import { useLocalStorage } from 'jsr:@zl-asica/react'

For more examples, check the documentation.

import { assignUUID } from '@zl-asica/react/utils'

const App = () => {
  // ✅ Works in SSR (Server-Side Rendering)
  const data = ['John', 'Jane']

  return data.map(assignUUID).map(({ id, value }) => (
    // Avoid using `key` prop, use `id` instead (Improves performance, follows the best practices of React)
    <p key={id}>
      {id}
      {value}
    </p>
  ))
}

export default App

import { useToggle } from '@zl-asica/react/hooks'

const App = () => {
  // ✅ Works in the browser (client-side)
  const [isToggled, toggle] = useToggle(false)

  return (
    <button type="button" onClick={toggle}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  )
}

export default App

ESM only. This package is built with ESM and is not compatible with CommonJS. If you are using CommonJS, sorry, this package is not for you. 😢

Contributions are welcome! Feel free to open an issue or submit a PR. ❤️

This project is licensed under the MIT License.