JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 58
  • Score
    100M100P100Q90970F
  • License MIT

Concise reactive components by embedding Kefir into React VDOM

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 Code Coverage

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!