Fetching contributors…
Cannot retrieve contributors at this time
101 lines (75 sloc) 2.79 KB


A utility function that inverts DOM element by creating a FaCC out of it. Allows you to easily create stateless DOM components with reference to a DOM element and inverted control flow.


import {invert} from 'libreact/lib/invert';

const Div = invert('div');
const Audio = invert('audio');
const Video = invert('video');
// etc...

  onMount={(div, comp) => console.log('MOUNTED', div, comp)}
  onUnmount={(div, comp) => console.log('UNMOUNTED', div, comp)}
  onClick={(event, div, comp) => {}}
  wrapper={(jsx, comp) => <b>jsx</b>}
>{(comp) =>



invert: (tag?: string) => React.ComponentClass;

, where

  • tag - a DOM element tag name.

Returns an inverted FaCC of that tag, whose props are passed through to the DOM element and it has these additional props:

  • render - optional, wrapper renderer that you can use to wrap your element in extra markup, defaults to (element) => element.
  • onMounted(el, comp) - called when component mounts; el - DOM element reference; comp - React component instance.
  • onUnmount(comp) - called when component unmounts; comp - React component instance.

Children of the created component can be a function that recieves a React component as its only argument.

The created react component instance has .el property which is a reference to the DOM element.


The default inverted element create for your convenience

const Inverted = invert('div');

Although, by default, it is created as <div> element, it does not have to be a <div>. You can overwrite tag name when you use it

<Inverted tag='span' onMount={() => console.log('<span> mounted')}>
  Hello world!


import {invert} from 'libreact/lib/invert';

const Audio = invert('audio');

  onTimeUpdate={() => {}}
  render={(element, comp) =>
      <button onClick={() =>}>Play</button>
      <button onClick={() => comp.el.pause()}>Pause</button>
      <button onClick={() => comp.el.currentTime -= 5}>Seek -</button>
      <button onClick={() => comp.el.currentTime += 5}>Seek +</button>
      <button onClick={() => comp.el.volume -= 0.05}>Volume -</button>
      <button onClick={() => comp.el.volume += 0.05}>Volume +</button>
      <button onClick={() => comp.el.muted = true}>Mute</button>
      <button onClick={() => comp.el.muted = false}>Unmute</button>
      <pre style={{fontFamily: 'monospace'}}>
          duration: comp.el && comp.el.duration,
          time: comp.el && comp.el.currentTime,
          volume: comp.el && comp.el.volume,
          muted: comp.el && comp.el.muted
        }, null, 4)}