react-resizable-component

DEMO: http://herlaang.com/resizable.html

GITHUB: https://github.com/wongherlung/react-resizable-component

A simple React resizable component that comes with features that you might need. You can make any other react components resizable by wrapping it into this component or you can just use this component as a resizable div. The main features of this component are as follows:

• Selectable resizable direction
  • East, South and South-east
• Resize in steps/intervals
  • Say resize in intervals of 50 pixels
• Callbacks for important actions
  • onStartResize
  • onDuringResize
  • onStopResize
  • onEachStep
• Ghost resizing
  • Resizes a transparent absolutely positioned div instead of the original component.
  • To be used in conjunction with onStopResize to achieve something like Microsoft Office Excel's drag down function.

Installation

This module does not need any other dependencies except React and ReactDOM. No jQuery needed.

Simply run:

npm install react-resizable-component --save

Usage

// Simple example shown using ES6
import ResizableBox from 'react-resizable-component';

export default class MyApp extends React.Component {
  render() {
  
    // Custom CSS for ResizableBox
    let customStyles = {
      marginTop: this.state.marginBetBoxes + 'px',
      backgroundColor: 'transparent'
    };
    
    return <div> // NOTE that this parent div should be larger than ResizableBox, if not it can't be resized
      <ResizableBox className="my-custom-class-name" style={customStyles}>
        // A children component is *required*.
        <MyOtherComponent/> // Be sure to give your component 100% height and width for it to be resizable
      </ResizableBox>
    </div>;
  }
}

Docs

IMPORTANT: Before you carry on, you should take note how the resizing is done for this component:

• Every ResizableBox has to be enclosed in a larger div for resizing to happen.
• All eventListeners for resizing will be attached to the parent of ResizableBox.

Index

• Children
• Props
  • height
  • width
  • direction
  • onStartResize
  • onDuringResize
  • onStopResize
  • onEachStep
  • options
    • minHeight
    • minWidth
    • maxHeight
    • maxWidth
    • lockAspectRatio
    • step
    • cursorMargin
    • allowGhostResize
  • styles
  • className
  • cssStyles

1. Children

A child component must be provided, if not an error would be thrown. If you have no child component, just put it a div with height: 100% and width: 100%. See below:

let style = {
  width: '100%',
  height: '100%'
};

<ResizableBox cssStyles={customStyles}>
  // A children component is *required*.
  <div style={style}>
    My own stuff...
  </div>
</ResizableBox>

2. Props

All props that are passed into ResizableBox are optional.

2.1 height (number)

default: 50

Specifies the height of the component in pixels

<ResizableBox height={50}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.2 width (number)

default: 250

Specifies the width of the component in pixels

<ResizableBox width={250}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.3 direction ('s' || 'e' || 'se')

default: 's'

Specifies the direction of which the component can extend.

's' -> South / downwards

'e' -> East / rightwards

'se' -> South-east / downwards and rightwards

<ResizableBox direction="se">
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.4 onStartResize (func)

Callback that will be invoked when resizing starts. Width and height of component will be available. See below:

myFunc(width, height) {
  console.log('Width: ' + width);
  console.log('Height: ' + height);
}
...
<ResizableBox onStartResize={this.myFunc}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.5 onDuringResize (func)

Callback that will be invoked when the size of the component changes. Width and height of component will be available. See below:

// Note that this will be called only when the component is undergoing resizing and will be called multiple times.
myFunc(width, height) {
  console.log('Width: ' + width);
  console.log('Height: ' + height);
}
...
<ResizableBox onDuringResize={this.myFunc}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.6 onStopResize (func)

Callback that will be invoked when resizing is stopped. Resizing only stops on mouseup or when the mouse leaves the parent div. Width and height of component will be available. See below:

myFunc(width, height) {
  console.log('Width: ' + width);
  console.log('Height: ' + height);
}
...
<ResizableBox onStopResize={this.myFunc}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.7 onEachStep (func)

Callback that will be invoked on each interval/step only when step is provided. Width and height of component will be available. See below:

// Note that this will be called only when the component is undergoing resizing and will be called multiple times.
myFunc(width, height) {
  console.log('Width: ' + width);
  console.log('Height: ' + height);
}
...
<ResizableBox onEachStep={this.myFunc}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.8 options (object)

See below for list of options available:

let myOptions = {
  minHeight: 50, // default is set to initial height of component
  minWidth: 250, // default is set to initial width of component
  maxHeight: 500, // default is set to Infinity
  maxWidth: 500, // default is set to Infinity
  lockAspectRatio: true, // default is set to false; Only works when direction="se"
  
  // Box only resizes at a set interval of pixels
  step: 50, // default is set to 1 (i.e. there is no step)
  
  // Width/Height of handle for resizing, region of component where user can click to start resizing
  cursorMargin: 20, // default is set to 10 pixels
  
  // Ghost resize does not change the size of the component, but only allows you to resize an absolutey positioned semi-transparent
  // div. This is to be used in conjunction with onStopResize and step to achieve something like Microsoft Excel's drag down formula
  // feature.
  allowGhostResize: true, // default is set to false

  // Set ResizableBox to full width to match parent, ignoring any width given
  fullWidth: true // default is set to false
};
...
<ResizableBox options={myOptions}>
  <div>
    My own stuff...
  </div>
</ResizableBox>

2.8.1 style (object)

Custom styling for ResizableBox. Do not change the position, width and height attributes as it might affect the behaviour of this component.

let customStyles = {
  marginTop: this.state.marginBetBoxes + 'px',
  backgroundColor: 'transparent'
};
...
<ResizableBox style={customStyles}>
  <MyOtherComponent/>
</ResizableBox>

2.8.2 className (object)

Custom class name for ResizableBox. Do not change the position, width and height attributes as it might affect the behaviour of this component.

<ResizableBox className="my-custom-class-name">
  <MyOtherComponent/>
</ResizableBox>

2.9 ghostCssStyles (object)

Custom styling for ResizableBox. Do not change the position, width and height attributes as it might affect the behaviour of this component.

let customStyles = {
  marginTop: this.state.marginBetBoxes + 'px',
  backgroundColor: 'transparent'
};
...
<ResizableBox ghostCssStyles={customStyles}>
  <MyOtherComponent/>
</ResizableBox>

License

MIT