Class Reactive is a utility library that endore multiple programing principles like (Separate of concern, DDD, reactive).

Last update: May 12, 2022

Class Reactive

Class Reactive is a utility library that endore multiple programing principles like (Separate of concern, DDD, reactive).

Design mainly for typescript decorator & react usage.

Installation

  npm install class-reactive;

Usages

import { Reactive, watch } from 'class-reactive';

// Step 1 - Data model
class DataModel {
  @Reactive
  public dataObj: any = { a: 123 };

  @Reactive
  public dataVal: any = 3; // Support primitive value
}

const dataModel = new DataModel();

// use watch to watch for datachange, -- refer to watch in @vue-reactive
watch(() => dataModel.dataObj.value.a, function cb(change: any) {
  console.log(change)
})

dataModel.dataObj.value.a = 2; // this will trigger watch callback

Other Usage

// watch all element of object -- note you dont need function
watch(dataModel.dataObj.value, function cb(change: any) {
  console.log(change);
});

dataModel.dataObj.value.b = 2; // this will trigger watch callback if object change

Compute Usage

// watch if compute change
watch(
  () => dataModel.dataObj.value.a + dataModel.dataVal.value,
  function cb(total: any) {
    console.log(total);
  },
);

dataModel.dataObj.value.b = 2; // this will trigger watch if any of those 2 value change

With React Hook

import { useWatch } from 'class-reactive';

function Component() {
  useWatch(() => dataModel.dataObj.value.a);

  return <div>{dataModel.dataObj.value.a}</div>;
}

dataModel.dataObj.value.a = 2; // this will trigger Component re-render

GitHub

https://github.com/ThamZoo/class-reactive
You might also like...

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Jun 25, 2022

Resources for use with ember-data for reactive data (re)fetching

ember-data-resources Resources for reactive data fetching with ember-data Compatibility Ember.js v3.25 or above Installation ember install ember-data-

May 30, 2022

Simple, flexible, reactive mobx theme detector and switcher.

mobx-theme Simple, flexible, reactive mobx theme detector and switcher. Features Uses prefers-color-scheme to detect initial theme Saves selected them

Nov 12, 2021

Minimal, type-safe and reactive ACL implementation

unacl Minimal, type-safe and reactive ACL implementation. This library doesn't replace a full-featured ACL system, like CASL. It rather serves a light

Mar 7, 2022

Reactive DOM elements, based on mutableJS's state

mutableJS / DOM DOM elements, brought to life by @mutablejs/core FAQ Can mutableJS / DOM be standalone? In theory it can, but it is kinda pointless, s

Jun 3, 2022

Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc.

ogmeta Chrome extension to preview and debug your webpage's meta tags for different social platforms like Twitter, Facebook, WhatsApp, LinkedIn etc. E

Apr 17, 2022

💧React component that looks like liquid in space

💧React component that looks like liquid in space

react-blob React component that looks like liquid in space Demo Install npm install --save react-blob Usage import { Blob } from 'react-blob'

May 30, 2022

Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Lenses in React Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state. Example You can construct a lens/

Feb 24, 2022

A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

May 29, 2022
Stitches-like variant API for plain class names.

classname-variants Stitches-like variant API for plain class names. The library is framework agnostic and can be used with any kind of CSS flavor. It

Jun 17, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Jun 12, 2022
A javascript microframework to shorten daily use CSS class manipulator methods by adding them all into a single method

CSS Class Builder A small typescript package built to work with ReactJS to short

Jan 7, 2022
We have updated our application over to using hooks and functional components to replace any class components we had before.
We have updated our application over to using hooks and functional components to replace any class components we had before.

Crwn hooks We have updated our application over to using hooks and functional components to replace any class components we had before. How to fork an

Feb 10, 2022
This command line can be used to convert React class components to become functional components

class-to-function This command line can be used to convert React class components to become functional components. Installation Install it as a global

Mar 8, 2022
React exercicio challenge for this class is a memory game
React exercicio challenge for this class is a memory game

React exercicio challenge for this class is a memory game

Mar 31, 2022
Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

React Facebook Components Components Facebook provider (provide settings to child components) Login button (provide user profile and signed request) L

Jun 11, 2022
Twinkle Tray lets you easily manage the brightness levels of multiple monitors
Twinkle Tray lets you easily manage the brightness levels of multiple monitors

Twinkle Tray lets you easily manage the brightness levels of multiple monitors. Even though Windows 10 is capable of adjusting the backlight on most monitors, it typically doesn't support external monitors. Windows 10 also lacks any ability to manage the brightness of multiple monitors.

Jun 27, 2022
Node.js library for building systematic trading strategies in reactive way.

Node.js library for building systematic trading strategies in reactive way. Use the power of TypeScript and Reactive Programming to research, develop

Dec 22, 2021
Trong ORM is a JavaScript library for building reactive SQLite queries for web, mobile and desktop

Trong ORM is a JavaScript library for building reactive SQLite queries for web, mobile and desktop

Jun 21, 2022