https://github.com/kochiyaocean/react-resizable-area
Create a resizable component with percentage width/height support
https://github.com/kochiyaocean/react-resizable-area
percentage-size react resizable
Last synced: 19 days ago
JSON representation
Create a resizable component with percentage width/height support
- Host: GitHub
- URL: https://github.com/kochiyaocean/react-resizable-area
- Owner: KochiyaOcean
- License: mit
- Created: 2018-01-28T08:37:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-08T16:35:21.000Z (over 7 years ago)
- Last Synced: 2025-02-02T13:46:27.559Z (over 1 year ago)
- Topics: percentage-size, react, resizable
- Language: JavaScript
- Homepage:
- Size: 71.3 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-resizable-area
Create a resizable component with percentage size support.
## Demo
[Link](https://kochiyaocean.github.io/react-resizable-area/demo/)
## Installation
Install the package using npm:
```
npm install react-grid-layout
```
## Example
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { ResizableArea } from 'react-resizable-area'
class Main extends React.Component {
state = {}
render () {
return (
!this.state.container && this.setState({ container: e })}
>
)
}
}
ReactDOM.render(
,
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.