JSPM

  • Created
  • Published
  • Downloads 58
  • Score
    100M100P100Q90970F
  • License MIT

JSX with Kefir, healthy?

Package Exports

  • karet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (karet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm version Build Status

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!