A fast, minimal state management solution for React ecosystems. Works seamlessly with React, Next.js, and React Native, offering predictable state updates with a tiny footprint.
npm install zustic
A fast, minimal state management solution for React ecosystems. Works seamlessly with React, Next.js, and React Native with predictable state updates and a tiny footprint.
---
create) to manage all your stateget() function for reading state outside components---
Choose your favorite package manager:
``bashnpm
npm install zustic
---
🤔 Why Zustic?
$3
| Metric | Zustic | Redux | Zustand | Context API |
|--------|--------|-------|---------|-------------|
| Bundle Size | ~500B | ~6KB | ~2KB | Built-in |
| Performance | ⚡ Optimized | Good | ⚡ Optimized | ⚠️ Re-renders |
| Dependencies | 0 | 0 | 0 | 0 |$3
- Ultra-Simple API: Master everything in 5 minutes
- Zero Boilerplate: No actions, reducers, or providers
- TypeScript Native: Perfect type inference out of the box
- Great DX: Intuitive , set(), get() functions$3
| Feature | Zustic | Redux | Zustand | Context API |
|---------|--------|-------|---------|-------------|
| Bundle Size | ~500B ✅ | ~6KB | ~2KB | 0B |
| Learning Curve | ⭐ Easy | ⭐⭐⭐⭐⭐ Hard | ⭐⭐ Easy | ⭐⭐⭐ Medium |
| Boilerplate | Minimal ✅ | Massive | Minimal | Some |
| TypeScript | Excellent ✅ | Good | Good | Good |
| Middleware | Built-in ✅ | Required | Optional | ❌ No |
| API Simplicity | Very Simple ✅ | Complex | Simple | Medium |
---
🚀 Quick Start
$3
`typescript
import { create } from 'zustic';type CounterStore = {
count: number;
inc: () => void;
dec: () => void;
reset: () => void;
};
export const useCounter = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
dec: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));
`$3
typescript
import { useCounter } from './store';function Counter() {
const { count, inc, dec, reset } = useCounter();
return (
Count: {count}
);
}export default Counter;
`That's it! No providers, no boilerplate, just pure state management.
---
📚 Core Concepts
$3
The
function is the heart of Zustic:`typescript
const useStore = create((set, get) => ({
// Your state and actions
}));
`-
: Update state (supports partial updates and functions)
- get: Read current state (works outside components)$3
`typescript
function Component() {
// Subscribe to entire store
const state = useStore();
// Or subscribe to specific properties (optimized)
const count = useStore((state) => state.count);
return {count};
}
`
---
🧩 Middleware System
Extend Zustic with powerful middleware for logging, persistence, validation, and more.
$3
typescript
const logger = (): Middleware => (set, get) => (next) => async (partial) => {
console.log('🔵 Previous State:', get());
await next(partial);
console.log('🟢 New State:', get());
};export const useStore = create(
(set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}),
[logger()]
);
`$3
typescript
const persist = (): Middleware => (set, get) => (next) => async (partial) => {
await next(partial);
localStorage.setItem('store', JSON.stringify(get()));
};export const useStore = create(
(set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}),
[persist()]
);
`$3
typescript
const validate = (): Middleware => (set, get) => (next) => async (partial) => {
// Validate before updating
if (typeof partial === 'object' && partial.count < 0) {
console.warn('Invalid state update');
return;
}
await next(partial);
};export const useStore = create(
(set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}),
[validate()]
);
`$3
typescript
export const useStore = create(
(set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}),
[logger(), persist(), validate()]
);
`---
📱 Multi-Platform Examples
$3
typescript
import { create } from 'zustic';const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}));
export default function App() {
const { count, inc } = useStore();
return (
{count}
);
}
`$3
typescript
import { create } from 'zustic';
import { View, Text, Button } from 'react-native';const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}));
export default function App() {
const { count, inc } = useStore();
return (
{count}
);
}
`$3
typescript
'use client';import { create } from 'zustic';
const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
}));
export default function Page() {
const { count, inc } = useStore();
return (
{count}
);
}
`---
🧪 Testing
Zustic stores are easy to test:
typescript
import { create } from 'zustic';// Your store
const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}));
// Test it
describe('Counter Store', () => {
it('should increment count', () => {
useStore.set({ count: 0 });
useStore.get().inc();
expect(useStore.get().count).toBe(1);
});
it('should reset count', () => {
useStore.set({ count: 5 });
useStore.get().reset();
expect(useStore.get().count).toBe(0);
});
});
`---
💡 Advanced Examples
$3
typescript
const useUserStore = create((set, get) => ({
user: null,
loading: false,
error: null,
fetchUser: async (id: string) => {
set({ loading: true });
try {
const response = await fetch(/api/users/${id});
const user = await response.json();
set({ user, loading: false, error: null });
} catch (error) {
set({ error: error.message, loading: false });
}
},
}));
`$3
typescript
const useCartStore = create((set, get) => ({
items: [],
addItem: (item) => set((state) => ({
items: [...state.items, item],
})),
get total() {
return get().items.reduce((sum, item) => sum + item.price, 0);
},
}));
`$3
typescript
const useAuthStore = create((set) => ({
user: null,
login: (user) => set({ user }),
logout: () => set({ user: null }),
}));const useAppStore = create((set) => ({
auth: useAuthStore,
theme: 'light',
}));
`---
🔗 Resources
- 📖 Full Documentation - Complete API reference and guides
- 🐛 GitHub Issues - Report bugs and request features
- 💬 Discussions - Ask questions and share ideas
- 📦 NPM Package - Install and view package info
---
📝 API Reference
$3
Creates a new store with state and actions.
Parameters:
-
- Function that receives set and get, returns initial state
- middlewares (optional) - Array of middleware functionsReturns:
- A hook function that provides access to store state and actions
Example:
`typescript
const useStore = create((set, get) => ({
value: 0,
increment: () => set((state) => ({ value: state.value + 1 })),
getValue: () => get().value,
}));
``---
Contributions are welcome! Please feel free to submit a Pull Request to the GitHub repository.
---
MIT License © 2024 Rejaul Karim
---
Created by Rejaul Karim - GitHub
---
⭐ Star us on GitHub if you find this helpful!