React ConStore

⚡ Ultra-lightweight state management for React 18+ applications (~950B gzipped)

📊 Quick Stats

| 📦 NPM Package | 📏 Bundle Size | ⭐ GitHub Stars | 📥 Downloads | |----------------|----------------|-----------------|--------------| | react-constore | ~950B gzipped | ⭐ Star us! | 📈 NPM Trends |

✅ Features

• ✅ TypeScript Ready - Full type safety out of the box
• ✅ React 18+ Compatible - Concurrent features supported
• ✅ Zero Dependencies - No external packages needed
• ✅ Devtools - use Redux-Devtools for debugging
• ✅ SSR Ready - Works with Next.js App Router
• ✅ Tree Shakeable - Only bundle what you use
• ✅ MIT Licensed - Free for commercial use

🔗 Quick Links

• 📖 Documentation: GitHub Repository
• 📦 Install: npm install react-constore
• 📊 Bundle Analysis: Bundle Phobia
• 📈 Download Stats: NPM Package
• 🐛 Issues & Support: GitHub Issues

🚀 Why React ConStore?

// Traditional React state management ❌
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Guest' });
const [todos, setTodos] = useState([]);
// Props drilling nightmare... 😱

// With React ConStore ✅
const store = createStore({
  count: 0,
  user: { name: 'Guest' },
  todos: []
});

// Use anywhere, anytime 🎉
const [count, setCount] = store.useStoreKey('count');

✨ Key Features

| Feature | Description | Benefit | |---------|-------------|---------| | 🪶 Ultra Lightweight | Less than 1KB gzipped | Faster bundle, better performance | | ⚛️ React 18/19 Ready | Concurrent features, automatic batching | Future-proof your app | | 🎯 Smart Re-renders | Deep equality checks | Only render when data actually changes | | 🔍 Selective Subscriptions | Subscribe to specific keys | Granular control over updates | | 📝 Full TypeScript | Complete type safety | Catch bugs at compile time | | 🌐 SSR Compatible | Next.js 13+ App Router | Server-side rendering support |

📦 Installation

# npm
npm install react-constore

# yarn
yarn add react-constore

# pnpm
pnpm add react-constore

🎯 Quick Start

'use client'; // for Next.js App Router

import createStore from 'react-constore';

// 1. Create your store
const store = createStore({
  count: 0,
  user: { name: 'Guest', age: 25 },
  todos: [],
  theme: 'light'
});

// 2. Use in components
function Counter() {
  const [count, setCount] = store.useStoreKey('count');
  
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(c => c + 1)}>
        Functional Update
      </button>
    </div>
  );
}

function UserProfile() {
  const [user, setUser] = store.useStoreKey('user');
  
  return (
    <div>
      <h2>{user.name} (Age: {user.age})</h2>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
        Happy Birthday! 🎉
      </button>
    </div>
  );
}

// 3. Components automatically sync!
function App() {
  return (
    <div>
      <Counter />
      <UserProfile />
    </div>
  );
}

📚 Documentation

🚀 Getting Started

• Installation & Quick Start
• Core Concepts

📖 API Reference

• Hooks Guide - useStoreKey(), useStoreKeys(), useStore()
• Store API - getState(), setState(), subscribe()

🔧 Advanced Usage

• DevTools - Debugger mode and built-in middlewares
• Advanced Patterns - Computed values, actions, middleware
• React Integration - React 18+, Next.js, React Native

🔄 Migration & Comparison

• Migration Guide - From Redux, Zustand, React Context API

📚 Best Practices & Help

• Best Practices
• Testing
• Troubleshooting

📊 Bundle Size Comparison

| Library | Size (gzipped) | Features | |---------|----------------|----------| | React ConStore | ~950B | ✅ Hooks ✅ TypeScript ✅ SSR ✅ DevTools ✅ Middleware ✅ Persist | | Redux Toolkit | ~3KB | ✅ DevTools ✅ Middleware ✅ Time Travel ❌ Simple API | | Zustand | ~600B | ✅ Simple ✅ Middleware ❌ Built-in TypeScript | | Jotai | ~4KB | ✅ Atomic ✅ TypeScript ❌ Learning Curve |

🆚 When to Use

Use React ConStore when:

• ✅ You want minimal bundle size
• ✅ Simple to medium complexity apps
• ✅ TypeScript-first development
• ✅ React 18+ features are important
• ✅ Devtools for debugging
• ✅ Custom middleware

Consider alternatives when:

• 🤔 Redux Toolkit: Need time-travel debugging, complex middleware
• 🤔 Zustand: Need advanced features (immer, persist, devtools)
• 🤔 Jotai: Bottom-up atomic state management
• 🤔 Context API: Very simple, component-local state

📄 License

MIT © Mostafa Rastegar

Made with ❤️ for the React community