Resizer Component for React
Installation
Install the package using npm or yarn:
npm i reactsizer-wc
yarn add reactsizer-wc
Usage
Import the resizable component and wrap it around elements to create a resizable div.
import React, { Component } from 'react'
import Resizable from 'reactsizer-wc';
export class App extends Component {
render() {
return (
<div style={{ height: '50vh' }}>
<Resizable background="black" height={365} width={260}>
<h1>Hello World</h1>
<p>Hello Hooman</p>
<p>Lorem Ipsum bacon sandwich</p>
</Resizable>
</div>
)
}
}
export default App
Props
- height(number) - height of the component in pixels.
- width(number) - width of the component in pixels.
- background(string) - background of the component.
Misc
- Resizable component takes 100% of parent div's height and width if none is provided as props.