react-box-resizer

react-box-resizer

react-box-resizer

React Library for box resize

Install

npm install --save react-box-resizer

Usage

import React, { Component } from 'react'

import BoxResizer from 'react-box-resizer'
import React, { useEffect, useState } from 'react'

class Example extends Component {
const [resizeData, setResizeData] = useState({})

const [showResizer, setShowResizer] = useState(false)
useEffect(() => {}, [setShowResizer, setResizeData
])

  render() {
    return <BoxResizer itemId={'itemId_1'}
            showResizer={showResizer}
            setShowResizer={setShowResizer}
            setResizeData={setResizeData}
            styles={{ minWidth: '100px', minHeight: '100px' }} />
            }
            }

Example:

import './App.css'
import { useState } from 'react'
import { useEffect } from 'react'

import BoxResizer from 'react-box-resizer'
function App() {
  const styles = { minWidth: '100px', minHeight: '100px' }

  const [resizeData, setResizeData] = useState({})

  const [showResizer, setShowResizer] = useState(false)
  useEffect(() => {}, [setShowResizer, setResizeData])

  const toJson = () => {
    return JSON.stringify(resizeData)
  }

  return (
    <div className='App'>
      <div
        style={{
          position: 'relative',
          minWidth: '100px',
          minHeight: '100px',
          width: resizeData?.newPos?.width || '100px',
          height: resizeData?.newPos?.height || '100px'
        }}
      >
        <div
          id='itemId_1'
          className='card'
          onClick={() => setShowResizer(true)}
        >
          <div className='card-header'>
            <h5>Card Header</h5>
          </div>
          <div className='card-body'>
            <h5>Box Resizer {showResizer ? 'True' : 'False'}</h5>
            <pre>{toJson()}</pre>
          </div>
        </div>
        {showResizer && (
          <BoxResizer
            itemId={'itemId_1'}
            showResizer={showResizer}
            setShowResizer={setShowResizer}
            setResizeData={setResizeData}
            styles={styles}
          />
        )}
      </div>
    </div>
  )
}

export default App

License

MIT © shambhulingappbelavatagi @gmail.com