Resize Container React

A simple React component to resize a container. Fully customizable. Zero dependencies.

Installation

1npm install --save @mir4a/resize-container-react

Usage

Basic

1import React from 'react'
2import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'
3
4const App = () => {
5  return (
6    <ResizeContainer>
7      <p>
8        Any content here
9      </p>
10      <ResizeBothHandle />
11    </ResizeContainer>
12  )
13}

With customizations

1import React from 'react'
2import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'
3
4const App = () => {
5  return (
6    <ResizeContainer
7      style={{
8        width: '100%',
9        height: '100%',
10        backgroundColor: 'yellow',
11      }}
12    >
13      <p style={{
14        width: 'inherit',
15        height: 'inherit',
16        overflow: 'auto',
17      }}>
18        Any content here
19      </p>
20      <ResizeBothHandle>
21        <img src="https://img.icons8.com/ios/50/000000/resize.png" />
22      </ResizeBothHandle>
23    </ResizeContainer>
24  )
25}

RTL

automatic detection is not supported yet

1import React from 'react'
2import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'
3
4const App = () => {
5  return (
6    <div dir="rtl">
7      <ResizeContainer
8        isRTL={true}
9      >
10        <p style={{
11          width: 'inherit',
12          height: 'inherit',
13          overflow: 'auto',
14        }}>
15          Any content here
16        </p>
17        <ResizeBothHandle>
18          <img src="https://img.icons8.com/ios/50/000000/resize.png" />
19        </ResizeBothHandle>
20      </ResizeContainer>
21    </div>
22  )
23}

Props

ResizeContainer

Prop	Type	Default	Description
children	ReactNode	null	any of your content
style?	CSSProperties	{}	any css styles
initialWidth?	number	undefined	Initial width of the container
initialHeight?	number	undefined	Initial height of the container
onResize?	({width: number, height: number}) => void	undefined	Callback function fired while container is resizing
onResizeEnd?	({width: number, height: number}) => void	undefined	Callback function when the container is resized

ResizeBothHandle

Prop	Type	Default	Description
children?	ReactNode	null	custom icon or whatever component to use as resize handle
style?	CSSProperties	{}	override default position and other styles

ResizeHorizontalHandle

Prop	Type	Default	Description
children?	ReactNode	null	custom icon or whatever component to use as resize handle
style?	CSSProperties	{}	override default position and other styles

ResizeVerticalHandle

Prop	Type	Default	Description
children?	ReactNode	null	custom icon or whatever component to use as resize handle
style?	CSSProperties	{}	override default position and other styles

Known Issues

1. Children containing image will cause the container's height to jump during resizing.
2. onResize callback returns negative values when resizing collapses the container.

License

ISC