@leveluptuts/drop-in

Drop In

Demo

https://levelup-drop-in.netlify.com/

Install

yarn add @leveluptuts/drop-in

Usage

The Syntax

import { DropIn, DragItem } from '@leveluptuts/drop-in';

function Component() {
  return (
    <DropIn data={data}>
      {activeColors.map(({ background, height }) => (
        <DragItem key={background}>
          <Square background={background} height={height} />
        </DragItem>
      ))}
    </DropIn>
  );
}

More options

import { DropIn, DragItem } from '@leveluptuts/drop-in';

function Component() {
  return (
    <DropIn data={data} whileHover={{ scale: 1.02 }} whileTap={{ scale: 1.04 }}>
      {activeColors.map(({ background, height }) => (
        <DragItem key={background}>
          <Square background={background} height={height} />
        </DragItem>
      ))}
    </DropIn>
  );
}

API

DropIn

The parent of an array of components

Prop	Type	Default	Description
children	ArrayOfComponents		An array of React Components
data	ArrayOfData		The data that powers the children
onDrop	func	(data) => data	OPTIONAL _ function that runs on drop, sends new data
whileTap	Framer Property	{ scale: 1.12 }	OPTIONAL _ object that sets the animation state
whileHover	Framer Property	{ scale: 1.03 }	OPTIONAL _ object that sets the animation state

DragItem

The item to be moved

Prop	Type	Default	Description
key	string		A unique key
children	Component or Element		The thing inside the thing you're moving
element	dom element for drag item	'div'	A string of the dom element being dragged

FAQ

Contributing

yarn yarn start

(in another tab) to run example

cd example yarn yarn start

Prior Art and Inspirations

Lots of this code has been adopted from https://codesandbox.io/s/framer-motion-drag-to-reorder-r4qme

License

MIT © leveluptuts