Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-component-resizable with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactComponentResizable = require("react-component-resizable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-component-resizable v2.0.1

React component to react on resize event using scroll trick

React Resizable Component

CircleCI

A React component to implement cross-browser event based resize detection, without interval polling!.

DEMO

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free