karet

This is an experimental library that allows you to embed Kefir observables into React Virtual DOM.

Reference

To use Karet, you simply import it as React:

import React from "karet"

and you can then write React components:

const oncePerSecond = Kefir.interval(1000).toProperty(() => {})

const Clock = () =>
  <div>
    The time is {oncePerSecond.map(() => new Date().toString())}.
  </div>

with VDOM that can have embedded Kefir observables.

karet-lift attribute

Karet only lifts built-in HTML elements implicitly. You can instruct Karet to lift non-primitive elements by adding the karet-lift attribute to them. For example, you could write:

import * as RR from "react-router"
import React   from "karet"

const Link = ({...props}) => <RR.Link karet-lift {...props}/>

to be able to use Link with embedded Kefir observables:

<Link href="https://www.youtube.com/watch?v=Rbm6GXllBiw">
  {Kefir.sequentially(1000, [3, 2, 1, "Boom!"])}
</Link>

So, that's about it. Rock 'n' Roll!