1.1.3 • Published 30 days ago
dynamic-div v1.1.3
Wrap any react component & make it movable
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>
)
}