react-drag-resize

react component drag and resize

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-drag-resize
1710.1.44 years ago6 years agoMinified + gzip package size for react-drag-resize in KB

Readme

download
react-drag-resize
react component drag and resize

How to install

  • npm install --save react-drag-resize

How to use

  • see ./demo
  • child must use absolute style for position confirmation. Like style class: child-container size-auto
  • child must have key, key suggest use string

demo
import DragResizeContainer from 'react-drag-resize';

const layout = [{ key: 'test', x: 0, y: 0, width: 200, height: 100, zIndex: 1 }]

<DragResizeContainer
    className='resize-container'
    resizeProps={{ 
        minWidth: 10, 
        minHeight: 10, 
        enable: canResizable(isResize) 
    }}
    onDoubleClick={clickScreen}
    layout={layout}
    dragProps={{ disabled: false }}
    onLayoutChange={onLayoutChange}
    scale={scale}
>
{layout.map((single) => {
  return (
    <div key={single.key} className='child-container size-auto border'>text test</div>
  );
})}
</DragResizeContainer>

const canResizable = (isResize) => {
    return { top: isResize, right: isResize, bottom: isResize, left: isResize, topRight: isResize, bottomRight: isResize, bottomLeft: isResize, topLeft: isResize };
};
  

DragResizeContainer Props

{
  layout,  // all children size and position,  demo: [{ key: 1, width: 100, height: 1000, x: 0, y: 0, zIndex: 1 } ]

  onLayoutChange, // callback layout

  dragProps,  // same to react-draggable props

  resizeProps,  // same to react-resizable-box props

  scale, // zoom or scale rate for component drag or resize

  onDoubleClick, // for resize-container double click
}

Base Packages

react-resizable-box
react-draggable

Inspiration From

In a project I have to make React compoments dragable and resizable, and I found react-rnd. But it has some bugs about muti compoments drag and show even when it's latest version(v5.0.3). So I refactor one, base on Base Packages.

CheckList

Changelog

0.1.4
  • resize to all direction
0.1.2
  • dragging scale fix in react-draggable
0.1.1
  • add support for resizing components inside scaled or zoom Div
0.1.0
  • onLayoutChange waring fix
0.0.9
  • fix resize width bug
0.0.8
  • key not empty, fix position bug
0.0.7
  • fix layout warning
0.0.6
  • can add other props for container
0.0.5
  • every single child z-index control
0.0.4
  • a way can export and restore all children size and postion
0.0.3
  • resize can not overflow boundary
  • support touchEvent
  • support other container
0.0.2
  • children drag and resize can not influence each other
  • can not drag when resize
  • can just use container not every DragResize component
0.0.1
  • base drag and resize