@j-a-z/primitives v0.0.3

Primitives

Primitives are designed for storing and managing a value with the ability to specify media queries and the option to subscribe to changes.

Basic use case

import { Primitive } from '@j-a-z/primitives'

const primitive = new Primitive(1000, {
  immutable: false,
  medias: {
    '(max-width: 1024px)': 500,
    '(max-width: 500px)': 300,
  },
})

const resize = () => primitive.matchMedia()
addEventListener('resize', resize)
resize()

console.log(primitive.current)

primitive.subscribe((current, previous) => {
  console.log(current, previous)
})

primitive.сurrent = 123

Here is the whole list of primitives:

• RestorablePrimitive
• StringPrimitive
• SelectPrimitive
• ObjectPrimitive
• NumberPrimitive
• ColorPrimitive
• BooleanPrimitive
• NodePrimitive

Most of them are currently just empty wrappers over RestorablePrimitive, but they are necessary for the correct operation of the Tweaker library, for which, by and large, this package was created.

All of them, except for NodePrimitive, inherit the RestorablePrimitive class and have the ability to restore their states from a special string called a snapshot.

At this stage, they all have the same options in the constructor:

{
  immutable: boolean,
  medias: {[key: string]: T},
}

Except for NumberPrimitive:

Example

{
  immutable: boolean,
  medias: {[key: string]: T},
  min: number,
  max: number
}

And except for SelectPrimitive:

Example

{
  immutable: boolean,
  medias: {[key: string]: T},
  options?: Array<T>
}