Skip to content

2Toad/reflex

Repository files navigation

Reflex ⚡

A unique and refreshingly simple approach to state management.

GitHub Release Downloads Build status

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.

👉 Why choose Reflex?

Quick Start

  1. Install the package:
npm i @2toad/reflex
  1. 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);

Key Features

  • 🪶 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

Common Use Cases

Basic Value Management

const username = reflex({ initialValue: '' });
username.subscribe(name => updateUI(name));

Computed Values

const price = reflex({ initialValue: 10 });
const quantity = reflex({ initialValue: 2 });
const total = computed([price, quantity], ([p, q]) => p * q);

Complex Objects

const user = deepReflex({
  profile: {
    name: 'John',
    settings: { theme: 'dark' }
  }
});

Want to learn more?

Start here to learn the basics and get a solid foundation:

Detailed guides for specific features:

Contributing

We welcome contributions! See our Contributing Guide to get started.