@ivbrajkovic/observable-context NPM

🌟 Observable-Context 🌟

Reactive Contexts in React, Made Effortless! Supercharge your React context with built-in reactivity using observable-context.

🚀 Features

🎣 Hooks Ready: Custom hooks tailored for your context.
📦 Zero Boilerplate: Set up reactive contexts without the repetitive code.
🚀 Efficient Renders: Components re-render only when the observed properties change.
🔌 Plug & Play: Integrates seamlessly with any React project.
⚙️ Fully Typed: javascript support out-of-the-box.

🔄 Batching Updates

One of the standout features of observable-context is its ability to batch updates. Instead of triggering a re-render for each individual state change, you can batch multiple updates together and apply them all at once. This not only reduces the number of renders but also ensures a smoother user experience, especially when dealing with rapid state changes.

How to Use:

Batching updates is as simple as wrapping your update logic within beginBatchUpdate and endBatchUpdate calls.

const { beginBatchUpdate, endBatchUpdate, proxy } = useYourContext();

beginBatchUpdate();
proxy.key1 = "new value 1";
proxy.key2 = "new value 2";
// ... other updates
endBatchUpdate();

Between the beginBatchUpdate and endBatchUpdate calls, all changes to the context are accumulated. Once endBatchUpdate is called, all accumulated changes are applied simultaneously, triggering a single re-render.

📚 Getting Started

Installation

Using npm:

npm install @ivbrajkovic/observable-context --save

Or using yarn:

yarn add @ivbrajkovic/observable-context

Basic Usage with React

Setting up the Observable Context:

import React from "react";
import { observableContextFactory } from "@ivbrajkovic/observable-context";

export const user = {
  name: "John",
  age: 30,
  email: "john.doe@example.com",
};

// Create an observable user context
export const {
  ContextProvider: UserProvider,
  useObservableContext,
  useWatch,
  useWatchList,
  useWatchAll,
} = observableContextFactory<typeof User>();

Using the Provider:

function App() {
  return (
    // Initial prop can be function that return initial state
    <UserProvider initial={user}>
      <UpdateName />
      <UpdateUserDetails />
      <UpdateCompleteUser />
    </UserProvider>
  );
}

export default App;

Using the Hooks:

function UpdateName() {
  const { state, setState } = useWatch("name");

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName("Jane")}>Change Name to Jane</button>
    </div>
  );
}

function UpdateUserDetails() {
  const { state, setState } = useWatchList(["name", "email"]);

  return (
    <div>
      <h1>{state.name}</h1>
      <p>Email: {state.email}</p>
      <button
        onClick={() => setState({ name: "Doe", email: "doe@example.com" })}
      >
        Update Details
      </button>
    </div>
  );
}

function UpdateCompleteUser() {
  const { state, setState } = useSubscribeAll();

  return (
    <div>
      <h1>{state.name}</h1>
      <p>Age: {state.age}</p>
      <p>Email: {state.email}</p>
      <button
        onClick={() =>
          setValues({ name: "Alice", age: 25, email: "alice@example.com" })
        }
      >
        Update All Details
      </button>
    </div>
  );
}