karet

[ ≡ | Tutorial | Reference ]

Karet

Karet is a library that allows you to embed Kefir properties into React Virtual DOM. Embedding observable properties into VDOM has the following benefits:

• It allows you to use only functional components, because you can then use observables for managing state and component lifetime, leading to more concise code.
• It helps you to use React in an algorithmically efficient way:
  • The body of a functional component is evaluated only once each time the component is mounted.
  • Only elements that contain embedded properties are rerendered when changes are pushed through observables. An update to a deeply nested VDOM element can be an O(1) operation.

Using Karet couldn't be simpler. You just import * as React from 'karet' and you are good to go.

Contents

• Tutorial
• Reference
  • Fragment
  • karet-lift attribute
  • fromClass(Component)

Tutorial

To use Karet, you simply import it as React:

import * as 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 properties. This works because Karet exports an enhanced version of createElement.

NOTE: Karet does not pass through all named React exports. Only createElement and Fragment are exported, which is all that is needed for basic use of VDOM or the Babel JSX transform.

NOTE: The result, like the Clock above, is just a React component. If you export it, you can use it just like any other React component and even in modules that do not import karet.

Reference

≡ Fragment

In addition to createElement, Karet exports React's Fragment component and lifts fragments implicitly.

≡ karet-lift attribute

Karet only lifts built-in HTML elements and fragments implicitly. The karet-lift attribute on a non-primitive element instructs Karet to lift the element.

For example, you could write:

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

// ...

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

to be able to use RR.Link with embedded Kefir properties.

≡ fromClass(Component)

fromClass allows one to lift a React component.

For example, you could write:

import * as RR from "react-router"
import {fromClass} from "karet"

const Link = fromClass(RR.Link)

to be able to use Link with embedded Kefir properties:

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