Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Reactive

npm version Coverage Status

A super simple, yet powerful and performant library for State Management / Reactive Programming.

Using React

import { useReactive } from "@reactivedata/react";

export default function App() {
  const state = useReactive({
    clickCount: 0,
  });

  return (
    <div>
      <p>
        The button has been clicked <strong>{state.clickCount} times!</strong>
      </p>
      <button onClick={() => state.clickCount++} />
    </div>
  );
}

View on CodeSandbox

Pass in any object to useReactive to create a Reactive state. Any properties (even nested / deep properties) can be mutated, and your component will update automatically if it's using any of the changed data.

reactive knows that your component uses state.clickCount, and when you click the button, it detects the change to clickCount and figures out which components need to be re-rendered with the new value.

Advanced example

const state = useReactive({
  players: [{ name: "Peter" }],
});

Adding players (state.players.push) or modifying a name (state.players[0].name = "John") will trigger changes and work out-of-the-box.

Without React

Reactive is perfectly usable without React, and actually has 0 external dependencies.

Simple example

import { reactive, autorun } from "@reactivedata/reactive";

const data = reactive({
  players: [{ name: "Peter" }],
});

autorun(() => {
  console.log(`There are ${data.players.length} players, the first player name is ${data.players[0].name}`);
});

data.players.push({ name: "Paul" });
data.players[0].name = "John";

Will print:

There are 1 players, the first player name is Paul
There are 2 players, the first player name is Paul
There are 2 players, the first player name is John

View on CodeSandbox

API

  • reactive
  • autorun
  • autorunAsync
  • untracked
  • runInAction

(to be documented)

The API surface is inspired by MobX, but with support for autorunAsync and an easier React interface.

Credits ❤️

Reactive builds on Reactive Programming concepts. In particular, it's inspired by and builds upon the amazing work by MobX and NX Observe.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published