Package Exports
- react-resizable
- react-resizable/css/styles.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-resizable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React-Resizable
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-resizableUsage
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
};