Adding `reaxive` library as a dependency

Run this command in a terminal, in your project's directory:

cargo add reaxive

To add it manually, edit your project's Cargo.toml file and add to the [dependencies] section:

reaxive = "1.0.3"

The reaxive library will be automatically available globally. Read the reaxive library documentation.

Back to the crate overview.

Readme

ReaXive

A reactive state management library for Dioxus inspired by MobX.

Features

Observable values that automatically trigger UI updates
Store pattern for global state management
Simple API similar to MobX
Seamless integration with Dioxus
Multi-field stores with reaxive_store! macro
Reactive components with reaxive! macro

Installation

Add ReaXive to your Cargo.toml:

[dependencies]
reaxive = "1.0.3"

Usage

Basic Store with Multiple Fields

use reaxive::prelude::*;
use dioxus::prelude::*;

// Define a custom type for your store
#[derive(Clone, Debug)]
pub struct User {
    pub name: String,
    pub last_name: String,
}

impl Default for User {
    fn default() -> Self {
        Self {
            name: "John".to_string(),
            last_name: "Doe".to_string(),
        }
    }
}

// Create a store with multiple observable fields using the reaxive_store! macro
reaxive_store!(CounterStore {
    count: i32 = 0,
    user: User = User::default()
});

// Implement methods for your store
impl CounterStore {
    pub fn increment(&self) {
        self.count.set(|count| *count += 1); // or .inc()
    }

    pub fn decrement(&self) {
        self.count.set(|count| *count -= 1); // or .dec()
    }

    pub fn get_count(&self) -> i32 {
        self.count.get()
    }

    pub fn set_name(&self, name: String) {
        self.user.set(|user| user.name = name);
    }

    pub fn set_last_name(&self, last_name: String) {
        self.user.set(|user| user.last_name = last_name);
    }

    pub fn get_user(&self) -> User {
        self.user.get()
    }

    pub fn get_full_name(&self) -> String {
        let user = self.user.get();
        format!("{} {}", user.name, user.last_name)
    }

    pub fn reset_user(&self) {
        self.user.set(User::default());
    }
}

Reactive Components

use reaxive::prelude::*;
use dioxus::prelude::*;

// Use the reaxive! macro to make components automatically update when store values change
reaxive! {
    #[component]
    pub fn CounterPage() -> Element {
        let store = CounterStore::new();

        rsx! {
            div { class: "counter-page",
                h1 { "Counter & User Demo" }

                // User section
                div { class: "user-section",
                    h2 { "👤 User Profile" }
                    p { "Full Name: {store.get_full_name()}" }

                    input {
                        placeholder: "First Name",
                        value: "{store.get_user().name}",
                        oninput: {
                            let store = store.clone();
                            move |evt: Event<FormData>| store.set_name(evt.value())
                        }
                    }
                    input {
                        placeholder: "Last Name",
                        value: "{store.get_user().last_name}",
                        oninput: {
                            let store = store.clone();
                            move |evt: Event<FormData>| store.set_last_name(evt.value())
                        }
                    }
                    button {
                        onclick: {
                            let store = store.clone();
                            move |_| store.reset_user()
                        },
                        "Reset User"
                    }
                }

                // Counter section
                div { class: "counter-section",
                    h2 { "🔢 Counter" }
                    p { "Current value: {store.get_count()}" }

                    button {
                        onclick: {
                            let store = store.clone();
                            move |_| store.increment()
                        },
                        "➕ Increment"
                    }
                    button {
                        onclick: {
                            let store = store.clone();
                            move |_| store.decrement()
                        },
                        "➖ Decrement"
                    }
                }
            }
        }
    }
}

Key Features

Zero Boilerplate: Use reaxive_store! and reaxive! macros for minimal setup
Type Safety: Full Rust type safety with automatic inference
Global State: Stores are automatically managed globally with macro reaxive!
Reactive Updates: Components automatically re-render when observable values change
Thread Safe: All stores are thread-safe by default
Multiple Data Types: Store multiple different types in a single store
Flexible API: Direct field access with .get(), .set(), and other methods

License

This project is licensed under the MIT License - see the LICENSE file for details.

Adding reaxive library as a dependency

Adding `reaxive` library as a dependency