@abhishekzambare/react-grid-dnd 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +171 -0
- package/package.json +16 -15
package/Readme.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img
|
|
3
|
+
max-width="300px"
|
|
4
|
+
alt="A demo showing views being swiped left and right."
|
|
5
|
+
src="https://raw.githubusercontent.com/bmcmahen/react-dnd-grid/master/demo.gif">
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
# react-grid-dnd
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/react-dnd-grid)
|
|
11
|
+
[](https://twitter.com/intent/follow?screen_name=benmcmahen)
|
|
12
|
+
|
|
13
|
+
Grid style drag and drop, built with React. See a live example on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8). You can also see it in action [here](https://react-gesture-responder.netlify.com/).
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- **Supports dragging between arbitrary number of lists**.
|
|
18
|
+
- **Built with [react-gesture-responder](https://github.com/bmcmahen/react-gesture-responder) to enable better control over gesture delegation.**
|
|
19
|
+
- **Disable drop targets or dragging altogether**
|
|
20
|
+
- **Animated with react-spring**
|
|
21
|
+
|
|
22
|
+
## Install
|
|
23
|
+
|
|
24
|
+
Install `react-grid-dnd` and `react-gesture-responder` using yarn or npm.
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
yarn add react-grid-dnd react-gesture-responder
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
Because `GridItem` components are rendered with absolute positioning, you need to ensure that `GridDropZone` has a specified height or flex, like in the example below.
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
import {
|
|
36
|
+
GridContextProvider,
|
|
37
|
+
GridDropZone,
|
|
38
|
+
GridItem,
|
|
39
|
+
swap,
|
|
40
|
+
} from "react-grid-dnd";
|
|
41
|
+
|
|
42
|
+
function Example() {
|
|
43
|
+
const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
|
|
44
|
+
|
|
45
|
+
// target id will only be set if dragging from one dropzone to another.
|
|
46
|
+
function onChange(sourceId, sourceIndex, targetIndex, targetId) {
|
|
47
|
+
const nextState = swap(items, sourceIndex, targetIndex);
|
|
48
|
+
setItems(nextState);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<GridContextProvider onChange={onChange}>
|
|
53
|
+
<GridDropZone
|
|
54
|
+
id="items"
|
|
55
|
+
boxesPerRow={4}
|
|
56
|
+
rowHeight={100}
|
|
57
|
+
style={{ height: "400px" }}
|
|
58
|
+
>
|
|
59
|
+
{items.map((item) => (
|
|
60
|
+
<GridItem key={item}>
|
|
61
|
+
<div
|
|
62
|
+
style={{
|
|
63
|
+
width: "100%",
|
|
64
|
+
height: "100%",
|
|
65
|
+
}}
|
|
66
|
+
>
|
|
67
|
+
{item}
|
|
68
|
+
</div>
|
|
69
|
+
</GridItem>
|
|
70
|
+
))}
|
|
71
|
+
</GridDropZone>
|
|
72
|
+
</GridContextProvider>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Dragging between lists
|
|
78
|
+
|
|
79
|
+
You can see this example in action on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8).
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import {
|
|
83
|
+
GridContextProvider,
|
|
84
|
+
GridDropZone,
|
|
85
|
+
GridItem,
|
|
86
|
+
swap,
|
|
87
|
+
move,
|
|
88
|
+
} from "react-grid-dnd";
|
|
89
|
+
|
|
90
|
+
function App() {
|
|
91
|
+
const [items, setItems] = React.useState({
|
|
92
|
+
left: [
|
|
93
|
+
{ id: 1, name: "ben" },
|
|
94
|
+
{ id: 2, name: "joe" },
|
|
95
|
+
{ id: 3, name: "jason" },
|
|
96
|
+
{ id: 4, name: "chris" },
|
|
97
|
+
{ id: 5, name: "heather" },
|
|
98
|
+
{ id: 6, name: "Richard" },
|
|
99
|
+
],
|
|
100
|
+
right: [
|
|
101
|
+
{ id: 7, name: "george" },
|
|
102
|
+
{ id: 8, name: "rupert" },
|
|
103
|
+
{ id: 9, name: "alice" },
|
|
104
|
+
{ id: 10, name: "katherine" },
|
|
105
|
+
{ id: 11, name: "pam" },
|
|
106
|
+
{ id: 12, name: "katie" },
|
|
107
|
+
],
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
function onChange(sourceId, sourceIndex, targetIndex, targetId) {
|
|
111
|
+
if (targetId) {
|
|
112
|
+
const result = move(
|
|
113
|
+
items[sourceId],
|
|
114
|
+
items[targetId],
|
|
115
|
+
sourceIndex,
|
|
116
|
+
targetIndex,
|
|
117
|
+
);
|
|
118
|
+
return setItems({
|
|
119
|
+
...items,
|
|
120
|
+
[sourceId]: result[0],
|
|
121
|
+
[targetId]: result[1],
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const result = swap(items[sourceId], sourceIndex, targetIndex);
|
|
126
|
+
return setItems({
|
|
127
|
+
...items,
|
|
128
|
+
[sourceId]: result,
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<GridContextProvider onChange={onChange}>
|
|
134
|
+
<div className="container">
|
|
135
|
+
<GridDropZone
|
|
136
|
+
className="dropzone left"
|
|
137
|
+
id="left"
|
|
138
|
+
boxesPerRow={4}
|
|
139
|
+
rowHeight={70}
|
|
140
|
+
>
|
|
141
|
+
{items.left.map((item) => (
|
|
142
|
+
<GridItem key={item.name}>
|
|
143
|
+
<div className="grid-item">
|
|
144
|
+
<div className="grid-item-content">
|
|
145
|
+
{item.name[0].toUpperCase()}
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</GridItem>
|
|
149
|
+
))}
|
|
150
|
+
</GridDropZone>
|
|
151
|
+
<GridDropZone
|
|
152
|
+
className="dropzone right"
|
|
153
|
+
id="right"
|
|
154
|
+
boxesPerRow={4}
|
|
155
|
+
rowHeight={70}
|
|
156
|
+
>
|
|
157
|
+
{items.right.map((item) => (
|
|
158
|
+
<GridItem key={item.name}>
|
|
159
|
+
<div className="grid-item">
|
|
160
|
+
<div className="grid-item-content">
|
|
161
|
+
{item.name[0].toUpperCase()}
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</GridItem>
|
|
165
|
+
))}
|
|
166
|
+
</GridDropZone>
|
|
167
|
+
</div>
|
|
168
|
+
</GridContextProvider>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abhishekzambare/react-grid-dnd",
|
|
3
3
|
"description": "grid style drag and drop for react",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.10",
|
|
5
5
|
"author": "Abhishek Zambare",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -39,34 +39,35 @@
|
|
|
39
39
|
"preview": "vite preview"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"motion": "^12.
|
|
42
|
+
"motion": "^12.42.2",
|
|
43
43
|
"resize-observer-polyfill": "^1.5.1",
|
|
44
|
-
"uuid": "^14.0.
|
|
44
|
+
"uuid": "^14.0.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@babel/core": "^
|
|
47
|
+
"@babel/core": "^8.0.1",
|
|
48
48
|
"@eslint/js": "^10.0.1",
|
|
49
|
-
"@microsoft/api-extractor": "^7.58.
|
|
49
|
+
"@microsoft/api-extractor": "^7.58.10",
|
|
50
50
|
"@rolldown/plugin-babel": "^0.2.3",
|
|
51
51
|
"@types/babel__core": "^7.20.5",
|
|
52
|
-
"@types/node": "^
|
|
52
|
+
"@types/node": "^26.1.1",
|
|
53
53
|
"@types/react": "^19.2.17",
|
|
54
54
|
"@types/react-dom": "^19.2.3",
|
|
55
|
-
"@
|
|
55
|
+
"@typescript/typescript6": "^6.0.2",
|
|
56
|
+
"@vitejs/plugin-react": "^6.0.3",
|
|
56
57
|
"babel-plugin-react-compiler": "^1.0.0",
|
|
57
|
-
"eslint": "^10.
|
|
58
|
+
"eslint": "^10.7.0",
|
|
58
59
|
"eslint-config-prettier": "^10.1.8",
|
|
59
60
|
"eslint-plugin-prettier": "^5.5.6",
|
|
60
61
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
61
|
-
"eslint-plugin-react-refresh": "^0.5.
|
|
62
|
-
"globals": "^17.
|
|
62
|
+
"eslint-plugin-react-refresh": "^0.5.3",
|
|
63
|
+
"globals": "^17.7.0",
|
|
63
64
|
"react": "^19.2.7",
|
|
64
65
|
"react-dom": "^19.2.7",
|
|
65
|
-
"typescript": "~
|
|
66
|
-
"typescript-eslint": "^8.
|
|
67
|
-
"unplugin-dts": "^1.0.
|
|
68
|
-
"vite": "^8.
|
|
69
|
-
"vite-plugin-checker": "^0.14.
|
|
66
|
+
"typescript": "~7.0.2",
|
|
67
|
+
"typescript-eslint": "^8.64.0",
|
|
68
|
+
"unplugin-dts": "^1.0.3",
|
|
69
|
+
"vite": "^8.1.4",
|
|
70
|
+
"vite-plugin-checker": "^0.14.4"
|
|
70
71
|
},
|
|
71
72
|
"peerDependencies": {
|
|
72
73
|
"react": "^19",
|