Skip to content

Latest commit

 

History

History
154 lines (101 loc) · 4.2 KB

README.md

File metadata and controls

154 lines (101 loc) · 4.2 KB

Kosha

Test Status Maintainability Code Coverage Version Downloads Bundle Size Gitpod Ready

A Modern, Lightweight, and Powerful State Management Library for React

Kosha is a minimal global state management solution tailored for modern React applications. At only 420 bytes (minzipped), it provides exceptional performance and simplicity for developers focused on clean and efficient code.


🚀 Key Features

  1. Ultra-Lightweight

    • Minzipped size: 571 bytes, ideal for performance-critical projects.
  2. Optimized Re-renders

    • Components only re-render when the selector output changes.
    • Example:
      const count = useKosha(state => state.count);
  3. Partial State Updates

    • Update specific parts of the state easily without spreading:
      set({ count });
      set(state => ({ count: state.count + 1 }));
  4. Direct Store Updates

    • Use useKosha.set to update the entire store directly:
      useKosha.set({ count: 42, user: "John Doe" });
  5. Flexible Consumption

    • Use the entire store or specific selectors as needed:
      const { count, setCount } = useKosha();
  6. Concurrent Rendering Ready

    • Built on React’s useSyncExternalStore, ensuring compatibility with React 18+ features.

⭐ Installation

Install Kosha using your preferred package manager:

pnpm add kosha

or

npm install kosha

or

yarn add kosha

📖 Usage

Define a Store

import { create } from "kosha";

const useKosha = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

Consume Without a Selector

const Counter = () => {
  const { count, increment } = useKosha();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Consume With a Selector

const Counter = () => {
  const count = useKosha(state => state.count);
  const increment = useKosha(state => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Direct Store Updates

You can also use useKosha.set to update the entire store directly:

useKosha.set({ count: 42, user: "John Doe" });

📌 FAQ

1. Does Kosha support async actions?

Yes! You can handle async actions with callbacks or promises directly within your store functions.

2. How does Kosha ensure reactivity?

Kosha relies on React’s useSyncExternalStore for smooth integration with React’s latest features, including concurrent rendering.


🤝 Contributing

We welcome your contributions! If you encounter issues or have suggestions, please submit them on the Kosha GitHub Repository.


📜 License

Kosha is licensed under the MPL-2.0 open-source license.

Check out our courses or sponsor our work.


Built with 💖 by Mayank Kumar Chaudhari