Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

Enables TC39 Observables

To create highly dynamic animations, you may want to use streams. Take a look at the tc39 observable proposal.

Sheet option link: true is required for this to function.

Observable values

import {Observable} from 'rxjs'

const styles = {
  button: {
    color: new Observable(observer => {
      observer.next('red')
    })
  }
}
.button-0 {
  color: red;
}

Observable rules

Similar to observable values, you can declare "observable" rules. A stream should contain in this case the style object. Sheet option link: true is required for this to function.

import {Observable} from 'rxjs'

const styles = {
  button: new Observable(observer => {
    observer.next({
      color: 'red',
      opacity: 1
    })
  })
}
.button-0 {
  color: red;
  opacity: 1;
}

Without processing overhead

By default, the plugin gets applied to the values or rules returned from Observables. If you want to turn the processing of for performance reasons, you can pass an option process: false.

import jss from 'jss'
import pluginObservable from 'jss-plugin-rule-value-observable'
import pluginCamelCase from 'jss-plugin-camel-case'
import pluginDefaultUnit from 'jss-plugin-default-unit'

jss.use(pluginObservable({process: false}), pluginCamelCase(), pluginDefaultUnit())
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(
  preset({
    observable: {process: false}
  })
)

Demo

CodeSandbox