@mir4a/resize-container-react v1.0.2-pre3

Resize Container React

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

Installation

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

Usage

Basic

import React from 'react'
import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'

const App = () => {
  return (
    <ResizeContainer>
      <p>
        Any content here
      </p>
      <ResizeBothHandle />
    </ResizeContainer>
  )
}

With customizations

import React from 'react'
import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'

const App = () => {
  return (
    <ResizeContainer
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: 'yellow',
      }}
    >
      <p style={{
        width: 'inherit',
        height: 'inherit',
        overflow: 'auto',
      }}>
        Any content here
      </p>
      <ResizeBothHandle>
        <img src="https://img.icons8.com/ios/50/000000/resize.png" />
      </ResizeBothHandle>
    </ResizeContainer>
  )
}

RTL

automatic detection is not supported yet

import React from 'react'
import {ResizeContainer, ResizeBothHandle} from '@mir4a/resize-container-react'

const App = () => {
  return (
    <div dir="rtl">
      <ResizeContainer
        isRTL={true}
      >
        <p style={{
          width: 'inherit',
          height: 'inherit',
          overflow: 'auto',
        }}>
          Any content here
        </p>
        <ResizeBothHandle>
          <img src="https://img.icons8.com/ios/50/000000/resize.png" />
        </ResizeBothHandle>
      </ResizeContainer>
    </div>
  )
}

Props

ResizeContainer

ResizeBothHandle

ResizeHorizontalHandle

ResizeVerticalHandle

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