react-resizable-area

Create a resizable component with percentage size support.

Demo

Link

Installation

Install the package using npm:

npm install react-grid-layout

Example

import React from 'react'
import ReactDOM from 'react-dom'
import { ResizableArea } from 'react-resizable-area'

class Main extends React.Component {
  state = {}
  render () {
    return (
      <ResizableArea
        minimumHeight=
        minimumWidth=
        initHeight=
        initWidth=
        defaultHeight=
        defaultWidth=
        maximumHeight=
        maximumWidth=
        parentContainer={document.querySelector('.resizable-container')}
        >
        <div
          style=
          ref={e => !this.state.container && this.setState({ container: e })}
          >
          <ResizableArea
            minimumHeight=
            minimumWidth=
            initHeight=
            initWidth=
            defaultHeight=
            defaultWidth=
            maximumHeight=
            maximumWidth=
            parentContainer={this.state.container}
            >
            <div style=>
            </div>
         </ResizableArea>
        </div>
      </ResizableArea>
    )
  }
}

ReactDOM.render(
  <Main />,
  document.querySelector('.resizable-container')
)

Methods

setSize: { width: { px: number, percent: number }, height: { px: number, percent: number } }

Set size of component directly

Props

id: string

ID of the resizable component

className: string

Extra className of the resizable component

children: node

The component that resized by resizable component

parentContainer: node

The DOM node that CSS prop width & height relative to.

disable: { width: bool, height: bool }

Disable resize on width / height direction

usePercentageResize: { width: bool, height: bool }

Resize the component by changing percentage or px

minimumWidth: { px: number, percent: number }

The minimum width of the component

Present as calc({px}px + {percent}%)

minimumHeight: { px: number, percent: number }

The minimum height of the component

maximumWidth: { px: number, percent: number }

The maximum width of the component

maximumHeight: { px: number, percent: number }

The maximum height of the component

initWidth: { px: number, percent: number }

The initial width of the component

initHeight: { px: number, percent: number }

The initial height of the component

defaultWidth: { px: number, percent: number }

The default width of the component (double click on right edge will reset to this size)

defaultHeight: { px: number, percent: number }

The default height of the component (double click on bottom edge will reset to this size)

onResizing: function ({ width, height })

Callback that fired on component resizing

onResized: function ({ width, height })

Callback that fired on resize completed.

This site is open source. Improve this page.