react-component-resizable
v2.0.1
Published
React component to react on resize event using scroll trick
Downloads
685
Maintainers
Readme
React Resizable Component
A React component to implement cross-browser event based resize detection, without interval polling!.
Usage
var Resizable = require('react-component-resizable');
<Resizable className="via transferPropsTo" onResize={this.onResize}>
Content...
</Resizable>
npm install react-component-resizable --save
Prop types
static propTypes = {
triggersClass: PropTypes.string,
expandClass : PropTypes.string,
contractClass: PropTypes.string,
embedCss : PropTypes.bool,
onResize : PropTypes.func.isRequired
}
static defaultProps = {
triggersClass: 'resize-triggers',
expandClass: 'expand-trigger',
contractClass: 'contract-trigger',
embedCss: true
}
Default style
The component will automatically embed some required style. This can be turned off using the embedCss={false}
prop.
.resize-triggers {
visibility: hidden;
}
.resize-triggers, .resize-triggers > div, .contract-trigger:before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.resize-triggers > div {
overflow: auto;
}
.contract-trigger:before {
width: 200%;
height: 200%;
}
Credits
Many thanks to Daniel - backalleycoder.com for this blog post and scecima and his project javascript-detect-element-resize!
Licence
MIT