drag

Addon for the react-beautiful-dnd that adds natural dragging animation

Nov 12, 2018
Addon for the react-beautiful-dnd that adds natural dragging animation

natural-drag-animation-rbdnd

Addon for the 'react-beautiful-dnd' that adds natural dragging animation.

View demo Download Source

Instalation

# yarn yarn add natural-drag-animation-rbdnd # npm npm install 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

GitHub

Recommended