9a807a1 Oct 1, 2018
1 contributor

Users who have contributed to this file

71 lines (44 sloc) 1.42 KB


React Universal Interface

Render prop that tracks some element's active status. Attaches to the root element, or provides a binding, if bond prop specified.


Use it as FaCC, attach to root element

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

<ActiveSensor>{({isActive}) =>
  <div>{isActive ? 'active' : 'not active'}</div>

Use bond to bind to any element

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

<ActiveSensor bond>{({bond, isActive}) =>
    <div {}>{isActive ? 'active' : 'not active'}</div>


Prop signature

interface IActiveSensorProps {
  bond?: boolean | string;

, where

  • bond - optional, string, specifies the bond name. If boolean and set to true, bond with name "bond" is created.

withActive() HOC

HOC that merges active prop into enhanced component's props. With HOC interface you always have to use bond.

import {withActive} from 'libreact/lib/ActiveSensor';

const MyCompWithHover = withActive(MyComp);

@withActive decorator

React stateful component decorator that adds active prop.

import {withActive} from 'libreact/lib/ActiveSensor';

class MyComp extends Component {