Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update README.md #234

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update README.md #234

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 95 additions & 86 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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 />} />
```
Expand All @@ -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 />} />
```
Expand All @@ -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} />} />
```
```