React Hooks and Utilities 🚀

|

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! ⭐️

Features

• 🚀 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.

Installation

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";

Usage

For more examples, check the documentation.

Example: assignUUID

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;

Example: useToggle

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;

Limitations

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. 😢

Contributing

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

License

This project is licensed under the MIT License.