easy-resize v1.0.18

Easy Resize

A React component that allows you to have an easily resizable container.

Installation

With npm

npm i easy-resize

With yarn

yarn add easy-resize

Props

Examples

Basic Usage with Custom Initial Size

import ResizableContainer from 'easy-resize'

<ResizableContainer
  initialWidth={400}
  initialHeight={300}
  minWidth={200}
  minHeight={200}
>
  <div>
    Content goes here
  </div>
</ResizableContainer>

Limiting Resize Directions

import ResizableContainer from 'easy-resize'

<ResizableContainer
  allowedDirections={['e', 'se', 's']} // Only allow resizing from right side, bottom, and bottom-right corner
>
  <div>
    Content goes here
  </div>
</ResizableContainer>

Using Custom Resize Handles

• You can specify custom resize handles.
• There is a basic resize handle option, and a corner resize handle option, if only the basic resize handle is defined then this will also be used for the corners.
• Corner resize handles will automatically be rotated to be facing towards the corner.

import ResizableContainer from 'easy-resize'

<ResizableContainer
  resizeHandle={<div style={{ width: 8, height: 8, backgroundColor: 'blue' }} />}
  cornerResizeHandle={<div style={{ width: 10, height: 10, backgroundColor: 'red' }} />}
>
  <div>
    Content goes here
  </div>
</ResizableContainer>