dynamic-div

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 when drag target is hovered	boolean
perspective	adds perspective to the component, when drag target 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>
  )
}