A unique and refreshingly simple approach to state management.
Whether you're building browser applications, Node.js services, or CLI tools, Reflex helps you handle your data elegantly. Works with any framework (React, Vue, Angular) or vanilla JavaScript.
- Install the package:
npm i @2toad/reflex
- Create and use a reactive value:
import { reflex } from '@2toad/reflex';
// Create a reactive value
const counter = reflex({ initialValue: 0 });
// Listen for changes
counter.subscribe(value => {
console.log('Counter is now:', value);
});
// Update the value
counter.setValue(1);
- 🪶 Simple to Use - Start managing state in minutes
- 🎯 Works Everywhere - Use with any JavaScript framework or vanilla JS
- ⚡ Fast & Efficient - Only updates when values actually change
- 🧮 Smart Calculations - Compute values based on other values automatically
- 🔄 Async Ready - Built-in support for async operations
- 🛡️ Safe & Reliable - Prevents common pitfalls and memory leaks
const username = reflex({ initialValue: '' });
username.subscribe(name => updateUI(name));
const price = reflex({ initialValue: 10 });
const quantity = reflex({ initialValue: 2 });
const total = computed([price, quantity], ([p, q]) => p * q);
const user = deepReflex({
profile: {
name: 'John',
settings: { theme: 'dark' }
}
});
Start here to learn the basics and get a solid foundation:
- Why Reflex? - Understanding Reflex's unique approach
- Features Guide - Core features and basic usage
- Advanced Usage - Complex patterns and techniques
- Best Practices - Guidelines for clean, efficient code
- Performance Tips - Optimization strategies
- API Reference - Complete API documentation
Detailed guides for specific features:
- Backpressure Handling - Managing high-frequency updates
- Batch Operations - Efficient bulk updates
- Computed Values - Deriving state
- Deep Reactivity - Nested object reactivity
- Operators - Transform and combine values
We welcome contributions! See our Contributing Guide to get started.