react-with-dimension

Debounced React high order component to expose container width and height.


Keywords
react, with-dimension, isomorphic, inline-style, high-order-component
License
ISC
Install
npm install react-with-dimension@1.0.2

Documentation

react-with-dimension

npm version dependency status build status

Debounced React high order component to expose container width and height.

Usage

Let's build an example react component:

const Header = ({ style }) => (<h1 style={style}>Header</h1>)

And decorate:

import WithDimension from 'react-with-dimension'

const Decorated = WithDimension()(Header)

Now when you use <Decorated /> it will pass the numeric properties containerWidth and containerHeight.

You can change the property name by passing a function, example:

const Decorated = WithDimension(
  { transform: (width, height) => ({ largeness: width, tallness: height }) }
)(Header)

The property passed to the Header would change to largeness and tallness

You can also change the wrapper div style to meet your needs like:

const Decorated = WithDimension(
  { containerStyle: { display: 'inline-block' } }
)(Header)

Contributing

First of all, thank you for wanting to help!

  1. Fork it.
  2. Create a feature branch - git checkout -b more_magic
  3. Add tests and make your changes
  4. Check if tests are ok - npm test
  5. Commit changes - git commit -am "Added more magic"
  6. Push to Github - git push origin more_magic
  7. Send a pull request! ❤️ 💖 ❤️