React Beautiful DND example without react-window

Asked
Active3 hr before
Viewed126 times

9 Answers

react
90%

Please raise a pull request if you would like to add examples for other virtualization libraries! ❤,A "virtual list" is the name given to a windowing performance optimisation technique where only the visible list items are rendered. See Rendering large lists with react-window by Addy Osmani for more background on virtual lists,react-beautiful-dnd supports drag and drop within and between virtual lists. This lets you have fantastic performance with very large data sets. As a general rule, you will want to start using a virtual list when your list size is more than 500 items.

Links to the documentation of the project and a fork of the react - window code sandbox.
load more v
88%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Join Stack Overflow to learn, share knowledge, and build your career., Meta Stack Overflow

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Play with this example if you want!,Beautiful and natural movement of items 💐 ,Accessible: powerful keyboard and screen reader support ♿️

One big difference from an API perspective of supporting virtual lists is that the dragging item (<Draggable />) can be removed during a drag. Currently, this is not the case. So in order to support virtual lists we need to support the ability to render a clone as the dragging item.

import React from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";
import { Draggable, VirtualDroppable } from "react-beautiful-dnd";

// Note: this example won't work - it is just to see what an api could look like

const Row = ({ index, style }) => (
  <Draggable draggableId={index}>
    {provided => (
      <div
        {...provided.dragHandleProps}
        {...provided.draggableProps}
        style={{
          ...style,
          ...provided.draggableProps.style
        }}
        ref={provided.innerRef}
      >
        Row {index}
      </div>
    )}
  </Draggable>
);

const Example = () => (
  <VirtualDroppable
    droppableId="droppable"
    renderDraggingItem={provided => (
      <div
        {...provided.dragHandleProps}
        {...provided.draggableProps}
        ref={provided.innerRef}
      >
        Drag Me
      </div>
    )}
  >
    {droppableProvided => (
      <List
        height={150}
        itemCount={1000}
        itemSize={35}
        width={300}
        innerRef={droppableProvided.innerRef}
      >
        {Row}
        {/* no placeholder needed */}
      </List>
    )}
  </VirtualDroppable>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

load more v
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Step 0: Creating a new React.js app,Step 2: Making a list draggable and droppable with React Beautiful DnD,Step 1: Installing React Beautiful DnD

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Ask questionsNested RBD and React-Window Virtualization ,Is it possible to have a nested RBD solution with react-window virtualization? Or are they inherently incompatible, the one requiring nesting and the other requiring a flat linear list?,I have a tree data structure that, if I flatten the tree into a linear list, can use RBD with react-window virtualization for a very performant drag and drop where all nodes are equal.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Beautiful and accessible drag and drop for lists with React, 🎧 React podcast: fast, accessible and beautiful drag and drop ,Rules for draggableId and droppableIds

Pretag
 Pretag team - issue, fix, solve, resolve
48%

4Reorder a List with react-beautiful-dnd8m 12s,14Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd3m 14s,12Reorder Columns with react-beautiful-dnd6m 47s

Pretag
 Pretag team - issue, fix, solve, resolve

Other "react-undefined" queries related to "React Beautiful DND example without react-window"