matejsvajger / reactive-object

Lightweight reactive vanilla js object (1kb)

reactive-object

Simple lightweight reactive object in vanilla js

Useful when you need to quickly drop in some simple reactivity.

DEMO

Installation

Yarn || NPM

$ yarn add @matejsvajger/reactive-object
$ npm i @matejsvajger/reactive-object --save

CDN

<script src="https://unpkg.com/@matejsvajger/reactive-object@1.2.3/dist/reactive.umd.js"></script>

Usage

import Reactive from '@matejsvajger/reactive-object'

const toMonetaryString = num => `${num.toFixed(2).replace('.', ',')} €`
const updateElementById = id => html => document.getElementById(id).innerHTML = html
const getTax = (price, tax) =>
  toMonetaryString(price - (price * 100) / (100 + tax)) +
  ` - <small>${tax}%</small>`

const product = new Reactive({
  qty: 2,
  price: 15,
  // computed props
  shipping: ({ qty }) => (qty > 0 ? 5 : 0),
  total: ({ qty, price, shipping }) => qty * price + shipping
})

// assign multiple formatters
product.format({
  total: toMonetaryString,
  shipping: toMonetaryString
})
// or add single
product.format('price', toMonetaryString)

// assign multiple observers
product.observe({
  price: updateElementById('price'),
  total: updateElementById('total'),
  shipping: updateElementById('shipping')
})
// or add single
product.observe('qty', updateElementById('qty'))

// or register a new prop and set it
product.observe('tax', updateElementById('tax'))
product.format('tax', (tax, { total }) => getTax(total, tax))
product.tax = () => 21

console.log(product.qty) // 2
console.log(product.price) // "15,00 €"
console.log(product.total) // "35,00 €"
product.price = 20;
console.log(product.price) // "20,00 €"
console.log(product.total) // "45,00 €"