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

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