react-dnd-card
v0.3.7
Published
Drag and Drop Card component for React. Create a drag and drop list in a minute.
Downloads
43
Maintainers
Readme
react-dnd-card
Drag and Drop Card component for React
What?
This component helps you create a drag and drop list like this one in a minute.
What's it look like?
Item.js
import React, { Component, PropTypes } from 'react';
const style = {
color: 'gray',
border: '1px dashed gray',
padding: '.5em 1em',
cursor: 'move'
};
const propTypes = {
isDragging: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
};
export function Item(props) {
const { text, isDragging } = props;
const opacity = isDragging ? 0 : 1;
return (
<div style={{ ...style, opacity }}>
{text}
</div>
);
}
Item.propTypes = propTypes;
export function createItem(item, isDragging) {
return <Item text={item.text} isDragging={isDragging}/>;
}
List.js
import React, { Component } from 'react';
import update from 'react/lib/update';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import DndCard from 'react-dnd-card';
import { Item, createItem } from './Item';
class List extends Component {
constructor(props) {
super(props);
this.moveCard = this.moveCard.bind(this);
this.state = {
items: [{
id: 1,
text: 'Write a cool JS library'
}, {
id: 2,
text: 'Make it generic enough'
}, {
id: 3,
text: 'Write README'
}, {
id: 4,
text: 'Create some examples'
}, {
id: 5,
text: 'Spam in Twitter and IRC to promote it (note that this element is taller than the others)'
}, {
id: 6,
text: '???'
}, {
id: 7,
text: 'PROFIT'
}]
};
}
moveCard(dragIndex, hoverIndex) {
const { items } = this.state;
const dragItem = items[dragIndex];
this.setState(update(this.state, {
items: {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragItem]
]
}
}));
}
render() {
const { items } = this.state;
return (
<div>
<h1>A Drag and Drop List</h1>
{items.map((item, index) => (
<DndCard
key={item.id}
index={index}
source={item}
createItem={createItem}
moveCard={this.moveCard}
style={{ marginBottom: '.5em' }}
/>
))}
</div>
);
}
}
export default DragDropContext(HTML5Backend)(List);
Install
You have to install React DnD and React DnD backend too.
npm install --save react-dnd react-dnd-html5-backend react-dnd-card
Api
<DndCard>
Props
index
(required)
The index of the <DndCard>
element.
id
(optional)
The unique id of the <DndCard>
element. This will turn the id mode
on.
source
(required)
Could be anything. It will be passed to createItem
(see below).
createItem(source, isDragging, index)
(required)
A function that creates and returns your item element.
moveCard(dragIndex/dragId, hoverIndex)
(required)
A function to handle the movement. The first argument is dragIndex
by default, and it will be dragId
in the id mode
.
endDrag
(optional)
A function to be called when drag ends.
noDropOutside
(optional)
Disabled by default. Set to true
to revert the drag operation if the card was dropped outside its container. You can compare the enabled demo and the disabled demo to tell the difference.
Other props (optional)
Since <DndCard>
wraps your item component with a <div>
element, you might want to apply some props (eg. style
) on that <div>
.
If a prop's value is a function, it'll be invoke with isDragging
and the result will be used as the prop value.
Important: Margin spaces between
<DndCard>
is undroppable whennoDropOutside
is set totrue
. If a user dropped<DndCard>
on margin spaces, the operation will be reverted, this usually brings poor UX. So it is recommended not to set margin between<DndCard>
whennoDropOutside
is set totrue
.
Performance Gotcha
Don't pass objects into <DndCard>
, pass functions instead! And make sure you don't create function in props too.
// Do
<DndCard source={this.getItem} ... />
// Don't
<DndCard source={item} ... />
// Do
<DndCard style={this.dragStyle} ... />
// Don't
<DndCard style={(isDragging) => {
return {
background: isDragging ? '#eee' : 'transparent'
} ;
}} ... />
Try example, it handles 500 items and still performances well.
ID Mode
Still not smooth enough? Pass id
into <DndCard>
to turn the id mode
on! It lets you handle the movement using requestAnimationFrame()
.
Try example, set ID_MODE
to true
and see how it handles 1000 items and still performances well.
Build This Project
npm install
npm build
Change Log
This project adheres to Semantic Versioning.
v0.3.7
bb5b8b2 Add id mode.
v0.3.6
c87a388 Pass index to createItem().
v0.3.5
d7f394e Add endDrag callback.
v0.3.4
8745b1c Fix peerDependencies and devDependencies.
v0.3.3
9f88e15 Remove inline source map.
v0.3.2
098d479 Invoke prop's value if it is a function.
v0.3.1
b0cba4c Check return value of createItem()
.
v0.3.0
35b147b Completely rewrite to solve the performance issue.
License
The MIT License (MIT).