☢ Dead Simple, Reactive, Blazing Fast State Management for React

Dead Simple, Reactive, Blazing Fast Global State Management for React

Features

⚛ Deeply Reactive, Mutate the State directly !

⚡ Fastest State Management Library

😍 Dead Simple API

♻ No Extra Re-Renders

🍀 Always Fresh State

⚛ Create A Global State

Create a Global State in your main file (index.js) for your app by calling globalState, before rendering App. That's it ! 🙌

Example

// index.js

import { globalState } from 'radioactive-store'

globalState({
  todos: []
})

ReactDOM.render(<App />, root);

☢ Using the Global State in Components

Use the useGS hook to get the entire global state

useGS takes a dependency array as argument. It is an array of keys that the Component depends on. when any of the dependencies change, Component is re-rendered.

Example

import { useGS } from "radioactive-store";

const Foo = () => {
  const GS = useGS(['a', 'b.c.d'])
  // GS is the entire global State
  // whenever GS.a or GS.b.c.d is mutated, Foo is re-rendered
  // ...
}

⚡ Updating the Global State

radioactive-store's state is deeply reactive.

To update the global state, you just mutate it! That's it

Because State is Deeply Reactive, You can also mutate state from console and UI will automatically update 😍 🙌

You can get the global state using radioactiveStore.state in console

You can directly mutate the state and UI will react to it

Counter Example

See Live Demo

// index.js
import { globalState } from 'radioactive-store'

globalState({
  count: 0
});

// Counter.js
import { useGS } from "radioactive-store";

const Counter = () => {
  const GS = useGS(["count"]);
  const increment = () => GS.count++;

  return (
    <div className="count" onClick={increment}>
      {GS.count}
    </div>
  );
};

Todos Example

Live Demo

// index.js
import { globalState } from 'radioactive-store'

globalState({
  todos: []
});

// Todos.js
import { useGS } from "radioactive-store";

const Todos = () => {

  const GS = useGS( ["todos"] );

  const removeTodo = i => GS.todos.splice(i, 1);
  const addTodo = todo => GS.todos.push(todo);

  // ....
};

🔧 🔨 README is a work in progress ...