natural-drag-animation-rbdnd
v2.1.1
Published
Addon for the 'react-beautiful-dnd' that adds natural dragging animation
Downloads
14,921
Readme
Info
Addon for the react-beautiful-dnd that adds natural dragging animation.
Demo
https://rokborf.github.io/natural-drag-animation-rbdnd/
Installation
# yarn
yarn add natural-drag-animation-rbdnd
# npm
npm install natural-drag-animation-rbdnd
If you're using typescript in your project, you might as well want to install the types.
npm i @types/natural-drag-animation-rbdnd
Example
import NaturalDragAnimation from 'natural-drag-animation-rbdnd';
...
<Draggable>
{(provided, snapshot) => (
<NaturalDragAnimation
style={provided.draggableProps.style}
snapshot={snapshot}
>
{style => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={style}
>
Item content
</div>
)}
</NaturalDragAnimation>
)}
</Draggable>
...
Note
The component modifies styles from draggableProps
, so style
prop should be placed after {...provided.draggableProps}
to override styles from it.
Props
snapshot (required)
Object. Pass snapshot
from Draggable
.
style (required)
Object. In most cases just pass provided.draggableProps.style
from Draggable
. NaturalDragAnimation
patches transform
from it.
animationRotationFade
Number. Use it to define fade speed of end rotation animation. Must be 0 < animationRotationFade
< 1.
default = 0.9
rotationMultiplier
Number. Use it to define rotation multiplier.
default = 1.3
Compatibility
Version 2
Compatible with react-beautiful-dnd v.10+
Version 1
Compatible with react-beautiful-dnd v.9
Author
Dmytro Lytvynenko [email protected]
License
MIT
Thanks
Nash Vail for his article