@leveluptuts/drop-in
Drop In
Demo
https://levelup-drop-in.netlify.com/
Install
yarn add @leveluptuts/drop-inUsage
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