Fetching contributors…
Cannot retrieve contributors at this time
68 lines (42 sloc) 1.25 KB


Render prop that tracks elements focus status. Attaches to the root element, or provides a binding, if bond prop specified.


Use it as FaCC, attach to root element

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

<FocusSensor>{({isFocused}) =>
  <div>{isFocused ? 'focused' : 'not focused'}</div>

Use bond to bind to any element

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

<FocusSensor bond>{({bond, isFocused}) =>
    <div {}>{isFocused ? 'focused' : 'not focused'}</div>


Prop signature

interface IFocusSensorProps {
  bond?: boolean | string;

, where

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

withFocus() HOC

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

import {withFocus} from 'libreact/lib/FocusSensor';

const MyCompWithHover = withFocus(MyComp);

@withFocus decorator

React stateful component decorator that adds focus prop.

import {withFocus} from 'libreact/lib/FocusSensor';

class MyComp extends Component {