React Bounds Element Queries in React
-
Like Media Queries - Set min and max values like breakpoints.
-
Use the Bounds in JS - Active bounds are passed down as props.
-
Use the Bounds in CSS - Use the bound names to style the component with CSS.
Installation & Usage
npm install react-bounds --save
Wrap a Component
Require react-bounds into a component. Wrap the export with bounds.wrap and react-bounds will start tracking the width and height of the component.
var React = require('react');
var bounds = require('react-bounds');
var SomeComponent = React.createClass({
render(){
return <div>Some Component</div>
}
});
module.exports = bounds.wrap(SomeComponent);
Define Bounds
Create a bounds method that returns an object with all of the bound information for that component:
var React = require('react');
var bounds = require('react-bounds');
var SomeComponent = React.createClass({
bounds() {
return {
'bound-name': {
minWidth: 0,
maxWidth: 500,
},
};
}
render(){
return <div>{ this.props.activeBounds }</div>
}
});
module.exports = bounds.wrap(SomeComponent);
Use with inline styles via ReactCSS