Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dropzone component
/** components/Dropzone.js **/
import React from 'react';
import { Droppable, Draggable } from 'react-beautiful-dnd';
const Dropzone = ({ isDropDisabled, heroes, id }) => (
<div className="column col-4">
<div className="divider" data-content={id.toUpperCase()} />
<Droppable droppableId={id} isDropDisabled={isDropDisabled}>
{provided => {
return (
<div className="menu hero-list" {...provided.droppableProps} ref={provided.innerRef}>
{heroes.map(({ name }, index) => (
<Hero key={name} name={name} index={index} />
))}
{provided.placeholder}
</div>
);
}}
</Droppable>
</div>
);
const Hero = ({ name, index }) => (
<Draggable key={name} draggableId={name} index={index}>
{provided => {
return (
<div
className="menu-item tile tile-centered"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<figure style={{ backgroundColor: 'transparent' }} className="avatar tile-icon">
<img src={`./hero_icons/${name.toLowerCase().replace(' ', '-')}.svg`} alt={name} />
</figure>
<div className="tile-content">{name}</div>
</div>
);
}}
</Draggable>
);
export default Dropzone;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.