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: about 2 months ago
JSON representation

A simple React component that is resizable with a handle.

Lists

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 
;

};



 } />

```