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

by React

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