hello-pangea-dnd-scrolling

A cross-browser solution to scrolling during drag and drop for @hello-pangea/dnd.

Installation

1npm install @hello-pangea/dnd hello-pangea-dnd-scrolling

or

1yarn add @hello-pangea/dnd hello-pangea-dnd-scrolling

Usage

There are two main ways to use this library:

1. Using DndScrollingContext (Recommended)

This approach provides the best integration with @hello-pangea/dnd:

1import React from 'react';
2import { Droppable, Draggable } from '@hello-pangea/dnd';
3import withScrolling, { DndScrollingContext } from 'hello-pangea-dnd-scrolling';
4
5// Create a scrollable container
6const ScrollableDroppable = withScrolling(props => {
7  const { children, ...rest } = props;
8  return (
9    <div
10      style={{
11        height: '400px',
12        width: '300px',
13        overflow: 'auto',
14        border: '1px solid #ccc',
15        padding: '8px'
16      }}
17      {...rest}
18    >
19      {children}
20    </div>
21  );
22});
23
24// Use DndScrollingContext instead of DragDropContext
25function App() {
26  const onDragEnd = (result) => {
27    // Your reordering logic here
28  };
29
30  return (
31    <DndScrollingContext onDragEnd={onDragEnd}>
32      <ScrollableDroppable>
33        <Droppable droppableId="droppable">
34          {(provided) => (
35            <div
36              ref={provided.innerRef}
37              {...provided.droppableProps}
38            >
39              {items.map((item, index) => (
40                <Draggable key={item.id} draggableId={item.id} index={index}>
41                  {(provided) => (
42                    <div
43                      ref={provided.innerRef}
44                      {...provided.draggableProps}
45                      {...provided.dragHandleProps}
46                    >
47                      {item.content}
48                    </div>
49                  )}
50                </Draggable>
51              ))}
52              {provided.placeholder}
53            </div>
54          )}
55        </Droppable>
56      </ScrollableDroppable>
57    </DndScrollingContext>
58  );
59}

2. Using the Hook

1import React, { useRef } from 'react';
2import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
3import { useDndScrolling } from 'hello-pangea-dnd-scrolling';
4
5function ScrollableContainer({ children }) {
6  const ref = useRef(null);
7  useDndScrolling(ref);
8
9  return (
10    <div
11      ref={ref}
12      style={{
13        height: '400px',
14        width: '300px',
15        overflow: 'auto',
16        border: '1px solid #ccc',
17        padding: '8px'
18      }}
19    >
20      {children}
21    </div>
22  );
23}
24
25function App() {
26  const onDragEnd = (result) => {
27    // Your reordering logic here
28  };
29
30  return (
31    <DragDropContext onDragEnd={onDragEnd}>
32      <ScrollableContainer>
33        <Droppable droppableId="droppable">
34          {/* ... */}
35        </Droppable>
36      </ScrollableContainer>
37    </DragDropContext>
38  );
39}

Options

Both the HOC and the hook accept the following options:

1// Default values
2const options = {
3  // Called with the new scrollLeft and scrollTop values when the container scrolls
4  onScrollChange: () => {},
5  // A function that returns the horizontal strength (between -1 and 1)
6  horizontalStrength: defaultHorizontalStrength,
7  // A function that returns the vertical strength (between -1 and 1)
8  verticalStrength: defaultVerticalStrength,
9  // Multiplier for the strength
10  strengthMultiplier: 30
11};
12
13// Example usage
14useDndScrolling(ref, options);
15// or
16withScrolling(Component, options);

How It Works

The library tracks the drag position and automatically scrolls the container when the dragged item gets close to the edges. This works by:

1. With DndScrollingContext: We intercept drag events from @hello-pangea/dnd to get precise drag coordinates.
2. With useDndScrolling: We use DOM events to detect dragging and scroll accordingly.

Example

Check out the src/example.jsx file for a complete example of how to use this library with @hello-pangea/dnd.

License

MIT