A framework-agnostic way to bind a JS value to one or more DOM elements
Last updated 3 years ago by jsepia .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install strange-item 
SYNC missed versions from official npm registry.

Strange Item

Build Status Coverage Status

Ever wanted to auto-update a DOM element every time a certain JS value is changed? But you don't want to set up Angular or React just to do that? If so, Strange Item might be for you.

Strange Item is a utility class that:

  • stores a value (preferably a string or number)
  • exposes a getter and a setter for that value
  • auto-updates a set of DOM elements whenever that value is changed

Strange Item is written in ES6 with ES6-style imports just because I don't want to have to go back and refactor when ES6 becomes mainstream. As a result, you need Node 7+ to build it. The good news is that, it generates ES5-compliant builds in AMD, CommonJS, IIFE and UMD formats. The unit tests run on the UMD version when run from the command line.


npm --save install strange-item

For Typescript

npm --save install @types/strange-item

Basic usage

Let's say you're working on a web-based game and you want a frames-per-second counter.

Include the JS library

Preferably use something like Webpack to bundle it with other libraries or with your code

<script type="text/javascript" src="/path/to/strange-item.min.js"></script>

Create a strange item to track your value

var fps = new StrangeItem();

// or 

var fps = new StrangeItem(0);

Create a DOM element to show the current value

<span id=""></span>

Bind the DOM element to the strange item

lastTimestamp =;
requestAnimationFrame(function(timestamp) {
  var timeElapsed = timestamp - lastTimestamp;
  fps.set(1000 / timeElapsed);

Manual updates

Not sure why you would need this since it defeats the entire purpose of using Strange Item.

fps.autoUpdate = false
fps.update(); // updates all bound DOM elements at once

If you set autoUpdate to false then you don't need to call set either. You can just do mySI.value = newValue.

Strange Item stores (not implemented yet)

A store lets you track multiple related values from a single object and bind/unbind/update them all at once.

var playerStats = new StrangeItem.Store({
    hp: 100,
    mana: 0
}, {
    autoUpdate: false
    hp: document.querySelector('#hpCounter'),
    mana: document.querySelector('#manaCounter')

function drinkManaPotion() {
    playerStats.set('mana', 100);

function getCurrentHP() {
    return playerStats.hp // playerStats.get('hp') works too

function receiveDamage(dmg) {
    playerStats.set('hp', getCurrentHP() - dmg);

function onFrameRendered() {


Why did you name this class "strange item"?

It's a reference to ADOM.

What if I need more complex functionality?

Use Angular or React.


  • Minification
  • stores
  • unbind

Current Tags

  • 1.0.1                                ...           latest (3 years ago)

2 Versions

  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (3)
Dev Dependencies (8)
Dependents (0)

Copyright 2014 - 2017 © |