Natural-drag-animation-rbdnd NPM

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.