dom-value-object-streamdeprecated

Convert a stream of DOM events into an object of its values.

Usage no npm install needed!

<script type="module">
  import domValueObjectStream from 'https://cdn.skypack.dev/dom-value-object-stream';
</script>

README

dom-value-object-stream

Convert a stream of DOM events into an object of its values.

Deprecated: This module has some problems and I don't even use it; if someone wants to maintain it, please contact me via github issues.

Build Status npm install

This module was written to make listening to form objects easier as a whole, rather than listening to each input individually.

Example

Some HTML with three inputs:

<div rel="inputs">
  <input type="text" name="one" />
  <input type="text" name="two" />
  <input type="text" name="three" />
</div>

…and the following Javascript:

var events = require('dom-delegation-stream')
  , values = require('dom-value-object-stream')

events(document.querySelector('[rel=inputs]'), 'input')
  .pipe(values()).on('data', function(data) {
    // some input occurs, entering "One" "Two" and "Three" into their
    // respective inputs
    console.log(data) // {one: 'One', two: 'Two', three: 'Three'}
  })

API

  • values([defaultValue] [, ignoreUnnamed]) - Create a new value transform stream
    • defaultValue - String. If no value is found, substitute this value. Default is '', a blank string.
    • ignoreUnnamed - Boolean. If true, unnamed inputs will not raise cause the stream to emit an error. Default false.

Returns a duplex stream that accepts DOM events, and emits a value object. The value object is only emitted when its values have changed.

Events

  • Emits a data event as any good stream should, with a key/value object, where the keys are the element names, and the value is the value of that element.
  • Internally, this looks at event.target.name and event.target.value, so be sure that any HTML element you're using has a name attribute.
  • The stream will emit 'error' events if event.target or event.target.name are not available.

Notes

  • data events will be fired each time a value changes, so for inputs where a user is typing into a form, you will get progressive events, one for each key.

License

MIT. See LICENSE for details.