ux

website user preference API

Usage no npm install needed!

<script type="module">
  import ux from 'https://cdn.skypack.dev/ux';
</script>

README

ux

website user preference API

ux uses localStorage to remember features such as user preferences or display modes.

API

Methods

Notes

  • feature can be any string
  • features are either enabled, disabled, or unknown

ux.enabled(feature?)

  • ux.enabled(): Get an array containing the names of all enabled features
  • ux.enabled(feature): Test if feature is enabled. Return boolean

ux.disabled(feature?)

  • ux.disabled(): Get an array containing the names of all disabled features
  • ux.disabled(feature): Test if feature is disabled. Return boolean

ux.known(feature?)

  • ux.known(): Get an array containing the names of all known features
  • ux.known(feature): Test if feature is known. Return boolean

ux.enable(feature)

  • Enable feature, and trigger associated listeners

ux.disable(feature)

  • Disable feature, and trigger associated listeners

ux.toggle(feature)

  • Toggle (either enable or disable) feature, and trigger associated listeners

ux.forget(feature)

  • Forget feature, and trigger associated listeners

ux.forget()

  • Forget all features

Emitters have emitter methods

  • .on(feature, listener)
  • .off(feature?, listener?)
  • .once(feature, listener)
  • .emit(feature, ...args)

Emitter syntax

  • ux.enable.on(feature, listener)
  • ux.disable.on(feature, listener)
  • ux.forget.on(feature, listener)
  • ux.enable.off(feature?, listener?)
  • ux.disable.off(feature?, listener?)
  • ux.forget.off(feature?, listener?)
  • etc.

Emitter example

// Listen for when 'crazycolors' is enabled
ux.enable.on('crazycolors', function(feature) {
  document.querySelector('html').classList.add(feature)
  console.log(feature + ' enabled')
})

// Enable 'crazycolors'
ux.enable('crazycolors')

You normally would want to also listen for when the same feature is disabled and do an opposing action. You're also likely to have multiple (and maybe related) features. ux doesn't care what your features do. It only provides the API for enabling, disabling, and remembering them. Do what makes sense for your features and users :)