diff --git a/README.md b/README.md
index 9e7c67ed..dd150236 100644
--- a/README.md
+++ b/README.md
@@ -17,119 +17,128 @@ See the [demo](/examples/TestLayout.js) for more on this.
### Installation
- $ npm install --save react-resizable
+```js
+$ npm install react-resizable
+```
+
+```js
+$ yarn add react-resizable
+```
### Compatibility
-[React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`.
-React-Resizable 2.x has been skipped.
-[React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`.
+- [React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`.
+- React-Resizable 2.x has been skipped.
+- [React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`.
### Usage
This package has two major exports:
-* [`<Resizable>`](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its
- callbacks and setting its props.
-* [`<ResizableBox>`](/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
-
+- [`<Resizable>`](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its
+ callbacks and setting its props.
+- [`<ResizableBox>`](/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
#### `<Resizable>`
+
```js
-const {Resizable} = require('react-resizable');
+const { Resizable } = require('react-resizable')
// ES6
-import { Resizable } from 'react-resizable';
+import { Resizable } from 'react-resizable'
-// ...
class Example extends React.Component {
- state = {
- width: 200,
- height: 200,
- };
-
- // On top layout
- onResize = (event, {node, size, handle}) => {
- this.setState({width: size.width, height: size.height});
- };
-
- render() {
- return (
- <Resizable height={this.state.height} width={this.state.width} onResize={this.onResize}>
- <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
- <span>Contents</span>
- </div>
- </Resizable>
- );
- }
+ state = {
+ width: 200,
+ height: 200
+ }
+
+ // On top layout
+ onResize = (event, { node, size, handle }) => {
+ this.setState({ width: size.width, height: size.height })
+ }
+
+ render() {
+ return (
+ <Resizable height={this.state.height} width={this.state.width} onResize={this.onResize}>
+ <div className="box" style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
+ <span>Contents</span>
+ </div>
+ </Resizable>
+ )
+ }
}
-
```
-
#### `<ResizableBox>`
+
```js
-const {ResizableBox} = require('react-resizable');
+const { ResizableBox } = require('react-resizable')
// ES6
-import { ResizableBox } from 'react-resizable';
+import { ResizableBox } from 'react-resizable'
class Example extends React.Component {
- render() {
- return (
- <ResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}
- minConstraints={[100, 100]} maxConstraints={[300, 300]}>
- <span>Contents</span>
- </ResizableBox>
- );
- }
+ render() {
+ return (
+ <ResizableBox width={200} height={200} draggableOpts={{ grid: [25, 25] }} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
+ <span>Contents</span>
+ </ResizableBox>
+ )
+ }
}
```
-### Props
+## Props
+
+### `<Resizable>` and `<ResizableBox>` Props
These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
+### ResizeCallbackData
+
+| Property | Type |
+| -------- | --------------------------------- |
+| node | HTMLElement |
+| size | { width: number, height: number } |
+| handle | ResizeHandleAxis |
+
+### ResizeHandleAxis
+
```js
-type ResizeCallbackData = {
- node: HTMLElement,
- size: {width: number, height: number},
- handle: ResizeHandleAxis
-};
-type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
-
-type ResizableProps =
-{
- children: React.Element<any>,
- width: number,
- height: number,
- // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
- handle: ReactElement<any> | (resizeHandle: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
- // 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,
- resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
-};
+type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'
```
+### ResizableProps
+
+| Property | Type | Optional | Default |
+| --------------- | ---------------------------------------------------- | -------- | --------------------------------------- |
+| axis | 'both' \| 'x' \| 'y' \| 'none' | | 'both' |
+| children | React.Element\<any> | | |
+| draggableOpts | Object | true | |
+| handle | ReactElement\<any> or Function | | |
+| handleSize | [number, number] | | [10, 10] |
+| height | number | | |
+| lockAspectRatio | boolean | | false |
+| maxConstraints | { [width: number, height: number] } | | { [width: Infinity, height: Infinity] } |
+| minConstraints | { [width: number, height: number] } | | { [width: 10, height: 10] } |
+| onResize? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | |
+| onResizeStart? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | |
+| onResizeStop? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | |
+| resizeHandles? | Array\<ResizeHandleAxis> | true | ['se'] |
+| width | number | | |
+
+### `<ResizableBox>` Props
+
The following props can also be used on `<ResizableBox>`:
-```js
-{
- style?: Object // styles the returned <div />
-}
-```
+| Property | Type | Optional
+| -------- | ------ | --------
+| style | Object | true
If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.
-#### Resize Handle
+## Resize Handle
If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.
@@ -153,12 +162,12 @@ You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and pr
```js
class MyHandleComponent extends React.Component {
- render() {
- const {handleAxis, innerRef, ...props} = this.props;
- return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
- }
+ render() {
+ const { handleAxis, innerRef, ...props } = this.props
+ return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
+ }
}
-const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);
+const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />)
<Resizable handle={<MyHandle />} />
```
@@ -167,9 +176,9 @@ const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={r
```js
const MyHandle = React.forwardRef((props, ref) => {
- const {handleAxis, ...restProps} = props;
- return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
-});
+ const { handleAxis, ...restProps } = props
+ return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />
+})
<Resizable handle={<MyHandle />} />
```
@@ -180,8 +189,8 @@ You can define a function as a handle, which will simply receive an axis (see ab
```js
const MyHandle = (props) => {
- return <div ref={props.innerRef} className="foo" {...props} />;
-};
+ return <div ref={props.innerRef} className="foo" {...props} />
+}
<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />
-```
\ No newline at end of file
+```