Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-grid-layout/react-resizable
A simple React component that is resizable with a handle.
https://github.com/react-grid-layout/react-resizable
Last synced: 7 days ago
JSON representation
A simple React component that is resizable with a handle.
- Host: GitHub
- URL: https://github.com/react-grid-layout/react-resizable
- Owner: react-grid-layout
- License: mit
- Created: 2014-12-28T16:22:51.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T13:47:00.000Z (about 1 month ago)
- Last Synced: 2024-10-15T01:31:53.821Z (21 days ago)
- Language: JavaScript
- Homepage: https://strml.github.io/react-resizable/examples/1.html
- Size: 1.95 MB
- Stars: 2,414
- Watchers: 27
- Forks: 365
- Open Issues: 78
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-resizable - A simple React component that is resizable with a handle (Uncategorized / Uncategorized)
- awesome-github-star - react-resizable - grid-layout | 2184 | (JavaScript)
- awesome-list - react-resizable - grid-layout | 1571 | (JavaScript)
README
### React-Resizable
[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)
A simple widget that can be resized via one or more handles.
You can either use the `` element directly, or use the much simpler `` element.
See the example and associated code in [ExampleLayout](/examples/ExampleLayout.js) and
[ResizableBox](/lib/ResizableBox.js) for more details.
Make sure you use the associated styles in [/css/styles.css](/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](/examples/TestLayout.js) for more on this.
### Installation
$ npm install --save 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`.
### Usage
This package has two major exports:
* [``](/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.
* [``](/lib/ResizableBox.js): A simple `
` element that manages basic state. Convenient for simple use-cases.
#### ``
```js
const {Resizable} = require('react-resizable');
// ES6
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 (
Contents
);
}
}
```
#### ``
```js
const {ResizableBox} = require('react-resizable');
// ES6
import { ResizableBox } from 'react-resizable';
class Example extends React.Component {
render() {
return (
Contents
);
}
}
```
### Props
These props apply to both `` and ``. Unknown props that are not in the list below will be passed to the child component.
```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,
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 | (resizeHandle: ResizeHandleAxis, ref: ReactRef) => ReactElement,
// 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 = ['se']
};
```
The following props can also be used on ``:
```js
{
style?: Object // styles the returned
}
```
If a `width` or `height` is passed to ``'s `style` prop, it will be ignored as it is required for internal function.
#### Resize Handle
If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.
This is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas.
There are a few ways to do this:
##### Native DOM Element
This requires no special treatment.
```js
} />
```
##### Custom React Component
You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.
###### Class Components
```js
class MyHandleComponent extends React.Component {
render() {
const {handleAxis, innerRef, ...props} = this.props;
return
}
}
const MyHandle = React.forwardRef((props, ref) => );
} />
```
###### Functional Components
```js
const MyHandle = React.forwardRef((props, ref) => {
const {handleAxis, ...restProps} = props;
return
;
});
} />
```
##### Custom Function
You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.
```js
const MyHandle = (props) => {
return
;
};
} />
```