Debounced React high order component to expose container width and height.
npm install react-with-dimensionDebounced React high order component to expose container width and height.
Let's build an example react component:
``js`
const Header = ({ style }) => (Header
)
And decorate:
`js
import WithDimension from 'react-with-dimension'
const Decorated = WithDimension()(Header)
`
Now when you use it will pass the numeric properties containerWidth and containerHeight.
You can change the property name by passing a function, example:
`js`
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:
`js`
const Decorated = WithDimension(
{ containerStyle: { display: 'inline-block' } }
)(Header)
First of all, thank you for wanting to help!
1. Fork it.
2. Create a feature branch - git checkout -b more_magicnpm test
3. Add tests and make your changes
4. Check if tests are ok - git commit -am "Added more magic"
5. Commit changes - git push origin more_magic`
6. Push to Github -
7. Send a pull request! :heart: :sparkling_heart: :heart: