The light decision for React state 👋

Reactive state manager for React by 1.34 kilobytes (based on reactive-box).

Light, Fast, and Pretty looked 😘

Realar targeted to clean code, minimal abstraction, minimal additional functions, modulable architecture, and time of delivery user experience.

You can start development with knows only two functions 😉

box. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh.

shared. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code.

import React from 'react';
import { box, shared } from 'realar';

class Counter {
  @box value = 0;

  inc = () => this.value += 1;
  dec = () => this.value -= 1;
}

const sharedCounter = () => shared(Counter);

const Count = () => {
  const { value } = sharedCounter();
  return <p>{value}</p>;
};

const Buttons = () => {
  const { inc, dec } = sharedCounter();
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;

For best possibilities use realar babel plugin, your code will be so beautiful to look like. See wrapped version on CodeSandbox.

The next set of possibilities I will enlighten in the future article!😌

Realar Github link.

From the author

Hello everyone who read me! One year ago I decide that Open Source is a necessary part of my Ikigai and I serve by that day.

I was deep research in React applications state management, more than one year of coding under that, a lot of versions different syntax constructions.., but as result, I took best from exists and packed to minimal performant code 😊

I will be happy to receive your opinion and thoughts about its library! And what you think, can it help people make their code feeling better?