Wednesday, 14 November, 2018 UTC

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

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

Summary

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

... more @ reactjsexample.com

reactjsexample.com