Permalink
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (56 sloc) 1.34 KB

SizeSensor

FaCC that tracks width and height of its children.

Example

Use it as FaCC

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

<SizeSensor>{({width, height}) =>
  `WIDTH: ${width}, HEIGHT: ${height}`
}</SizeSensor>

Or use onSize prop

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

<SizeSensor onSize={({width, height}) => console.log(width, height)}>
  Resize me!
</SizeSensor>

withSize() HOC

HOC that merges size prop into enhanced component's props.

import {withSize} from 'libreact/lib/SizeSensor';

const MyComp = (props) =>
  <pre style={{fontFamily: 'monospace'}}>
    {JSON.stringify(props, null, 4)}
  </pre>;

const MyCompWithSize = withSize(MyComp);

<MyCompWithSize />

You can overwrite the inject prop name

const MyCompWithDimensions = withSize(MyComp, 'dimensions');

Or simply merge the whole object into your props

const MyCompWithSize = withSize(MyComp, '');

@withSize decorator

React stateful component decorator that adds size prop.

import {withSize} from 'libreact/lib/SizeSensor';

@withSize
class MyComp extends Component {

}

Specify different prop name

@withSize('dimensions')
class MyComp extends Component {

}

or merge the the whole size object into props

@withSize('')
class MyComp extends Component {

}