A simple React component that is resizable with a handle.
JavaScript CSS Shell
Clone or download
STRML Merge pull request #89 from antonsapyanov/fix/react-draggable-version
fix(pkg): remove old react-draggable version
Latest commit 74ef3b1 Apr 20, 2018

README.md

React-Resizable

View the Demo

A simple widget that can be resized via a handle.

You can either use the <Resizable> element directly, or use the much simpler <ResizableBox> element.

See the example and associated code in TestLayout and ResizableBox for more details.

Make sure you use the associated styles in /css/styles.css, as without them, you will have problems with handle placement and visibility.

You can pass options directly to the underlying DraggableCore instance by using the prop draggableOpts. See the demo for more on this.

Installation

Using npm:

$ npm install --save react-resizable

Usage

const Resizable = require('react-resizable').Resizable; // or,
const ResizableBox = require('react-resizable').ResizableBox;

// ES6
import { Resizable, ResizableBox } from 'react-resizable';

// ...
render() {
  return (
    <ResizableBox width={200} height={200} draggableOpts={{...}}
        minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <span>Contents</span>
    </ResizableBox>
  );
}

Props

These props apply to both <Resizable> and <ResizableBox>.

{
  children: React.Element<any>,
  width: number,
  height: number,
  // If you change this, be sure to update your css
  handleSize: [number, number] = [10, 10],
  lockAspectRatio: boolean = false,
  axis: 'both' | 'x' | 'y' | 'none' = 'both',
  minConstraints: [number, number] = [10, 10],
  maxConstraints: [number, number] = [Infinity, Infinity],
  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  draggableOpts?: ?Object
};