Wrap any react component & make it movable

Live Demo

Installation

npm install dynamic-div

Imports

import { DynamicDiv } from 'dynamic-div'

Usage

Wrap your component with the DynamicDiv component, and configure options.

function DraggableDiv() {
  return (
    <div>
      <DynamicDiv scalable top={20} left={50}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            width: '15em',
            padding: '1em',
            borderRadius: '10px',
            boxShadow: '0px 5px 20px -5px rgba(0, 0, 0, 0.25)',
          }}
        >
          <h3>testing</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla accusantium aliquam recusandae alias nihil
            eius est quis quas at, vitae, odit dolor deleniti quaerat. Laboriosam ut repellendus expedita eaque aliquid.
          </p>
        </div>
      </DynamicDiv>
    </div>
  )
}

Configuration options

| Property | Description | Type | | ------------ | ------------------------------------------------------------------------ | -------------------------------- | | shadow | specifies whether to add shadow or not | boolean | | scalable | specifies whether component will scale whendrag target is hovered | boolean | | perspective | adds perspective to the component, when dragtarget is hovered | boolean | | top | specifies initial top position | number | | left | specifies initial left position | number | | draggableRef | react ref object | React.MutableRefObject <any> |

Specifying a custom DOM Target

function CustomDomTarget() {
  const dragRef = useRef(null)

  return (
    <div>
      <DynamicDiv scalable shadow top={20} left={50} draggableRef={dragRef}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            width: '15em',
            padding: '1em',
            borderRadius: '10px',
            boxShadow: '0px 5px 20px -5px rgba(0, 0, 0, 0.25)',
          }}
        >
          <h3 ref={dragRef}>drag this !!!</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla accusantium aliquam recusandae alias nihil
            eius est quis quas at, vitae, odit dolor deleniti quaerat. Laboriosam ut repellendus expedita eaque aliquid.
          </p>
        </div>
      </DynamicDiv>
    </div>
  )
}