Data Live

Simple data reactivity for DOM elements

Data Live logo

Automatically update an elements text when data is updated. It is not intended as a replacement for a UI library but a small utility for vanilla JS apps.

Features

  • Automatically create reactivity on data-live elements
  • Element text is updated when the data is updated
  • Supports complex data i.e. Arrays and Objects
  • Templates can be used for presentation

Demos

Interactive demos on Codepen.

Text

Text

Text - Input

Your text:

Number - Countdown

3600

Array

Array item

Object

Installation

$ npm install @nigelotoole/data-live --save-dev

Usage

Simple

Add the script to the page or import the functions needed. Add a data-live attribute to an element and then update its value as needed.

import { component, store, effect, get, set } from 'data-live.js';
<div data-live="text">Text</div> 
// Update text
set('text', 'Update Text');
// This is the same as the above if you dont want to import the set method
// window['text']['text'] = 'Update Text';

Complex data

Get data, create a template for data presentation, create a store then update the data in the store. The example element has a class of 'users' which matches the store name but you can also pass a selector e.g. component(dataArray, 'users', usersTemplate, '.users-class').

<div class="users"></div> 
// Data
let dataArray = [...]

// Setup component
let usersTemplate = (data) => {
  return `
  <ul>
      ${ data.map((item) => {
        return `<li>
          ${ item['firstname']} - ${item['address']['city'] }<br>
          ${ item['interests'] ? item['interests'].map((item) => item.name).join(', ') : '' }
        </li>`;
      }).join('')}
  </ul>`;
}

let usersComponent = component(dataArray, 'users', usersTemplate);

// Update data
usersComponent[0]['firstname'] = `${usersComponent[0]['firstname']} updated`;

To use data in an already crated store you can with duplicate the element e.g. <div class="users"></div>. If you need to present the data differently you can add an effect to the store.

let userZeroTemplate = (data) => {
  data = data[0];
  return `${ data['firstname']}`;
}

effect(usersComponent, 'users', userZeroTemplate, '.user-zero');

Methods

get: Gets a value from the store.

Property Default Type Description
key String Property key to get.
store window String Name of the store.

set: Sets a value in the store.

Property Default Type Description
key String Property key to set.
value String Property value to set.
store window String Name of the store.

component: Creates a store and the effect of the store.

Property Default Type Description
data String || Array || Object Data for the store.
name String Name of the store.
template String Template for presentation of the data.
selector `.${name}` String Element to output the data.

effect: Creates the effect of the store, i.e. updating the element when the data changes.

Property Default Type Description
data String || Array || Object Data for the store.
name String Name of the store.
template String Template for presentation of the data.
selector String Element to output the data.

store: Creates a store i.e. a proxy for the data.

Property Default Type Description
data {} Object Data for the store.
name store String Name of the store.

Compatibility

Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev

References

Simple reactive data stores with vanilla JavaScript and Proxies, A primer on JavaScript Proxies and Reef JS by Chris Ferdinandi.
Unravel Reactivity in 16 lines of Vanilla JS by Michele Rullo.