Skip to content

A React component to implement cross-browser event based resize detection

License

Notifications You must be signed in to change notification settings

SpirentOrion/orion-react-component-resizable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

propTypes: {
  triggersClass: React.PropTypes.string,      // default resize-triggers
  expandClass: React.PropTypes.string,        // default expand-trigger
  contractClass: React.PropTypes.string,      // default contract-trigger
  embedCss: React.PropTypes.bool,             // embed required style, default true
  onResize: React.PropTypes.func.isRequired   // required callback function
}

Default style

The component will automatically embed some required style. This can be turned off using the embedCss={false} prop.

.resize-triggers {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

.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

About

A React component to implement cross-browser event based resize detection

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.6%
  • HTML 6.4%