@abhishekzambare/react-grid-dnd 0.0.1 → 0.0.3

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.
Files changed (2) hide show
  1. package/README.md +156 -60
  2. package/package.json +7 -9
package/README.md CHANGED
@@ -1,75 +1,171 @@
1
- # React + TypeScript + Vite
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>
2
7
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
8
+ # react-grid-dnd
4
9
 
5
- Currently, two official plugins are available:
10
+ [![npm package](https://img.shields.io/npm/v/react-dnd-grid/latest.svg)](https://www.npmjs.com/package/react-dnd-grid)
11
+ [![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)
6
12
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
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/).
9
14
 
10
- ## React Compiler
15
+ ## Features
11
16
 
12
- The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
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**
13
21
 
14
- Note: This will impact Vite dev & build performances.
22
+ ## Install
15
23
 
16
- ## Expanding the ESLint configuration
24
+ Install `react-grid-dnd` and `react-gesture-responder` using yarn or npm.
17
25
 
18
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
26
+ ```
27
+ yarn add react-grid-dnd react-gesture-responder
28
+ ```
19
29
 
20
- ```js
21
- export default defineConfig([
22
- globalIgnores(['dist']),
23
- {
24
- files: ['**/*.{ts,tsx}'],
25
- extends: [
26
- // Other configs...
30
+ ## Usage
27
31
 
28
- // Remove tseslint.configs.recommended and replace with this
29
- tseslint.configs.recommendedTypeChecked,
30
- // Alternatively, use this for stricter rules
31
- tseslint.configs.strictTypeChecked,
32
- // Optionally, add this for stylistic rules
33
- tseslint.configs.stylisticTypeChecked,
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.
34
33
 
35
- // Other configs...
36
- ],
37
- languageOptions: {
38
- parserOptions: {
39
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
40
- tsconfigRootDir: import.meta.dirname,
41
- },
42
- // other options...
43
- },
44
- },
45
- ])
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
+ }
46
75
  ```
47
76
 
48
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
49
-
50
- ```js
51
- // eslint.config.js
52
- import reactX from 'eslint-plugin-react-x'
53
- import reactDom from 'eslint-plugin-react-dom'
54
-
55
- export default defineConfig([
56
- globalIgnores(['dist']),
57
- {
58
- files: ['**/*.{ts,tsx}'],
59
- extends: [
60
- // Other configs...
61
- // Enable lint rules for React
62
- reactX.configs['recommended-typescript'],
63
- // Enable lint rules for React DOM
64
- reactDom.configs.recommended,
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" },
65
107
  ],
66
- languageOptions: {
67
- parserOptions: {
68
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
69
- tsconfigRootDir: import.meta.dirname,
70
- },
71
- // other options...
72
- },
73
- },
74
- ])
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
+ }
75
171
  ```
package/package.json CHANGED
@@ -15,15 +15,13 @@
15
15
  "files": [
16
16
  "dist"
17
17
  ],
18
- "main": "./dist/react-grid-dnd.umd.cjs",
19
18
  "module": "./dist/react-grid-dnd.js",
20
19
  "exports": {
21
20
  ".": {
22
- "import": "./dist/react-grid-dnd.js",
23
- "require": "./dist/react-grid-dnd.umd.cjs"
21
+ "import": "./dist/react-grid-dnd.js"
24
22
  }
25
23
  },
26
- "version": "0.0.1",
24
+ "version": "0.0.3",
27
25
  "homepage": "https://github.com/Macintosh98/react-grid-dnd",
28
26
  "bugs": {
29
27
  "url": "https://github.com/Macintosh98/react-grid-dnd/issues"
@@ -51,17 +49,17 @@
51
49
  "@eslint/js": "^10.0.1",
52
50
  "@rolldown/plugin-babel": "^0.2.3",
53
51
  "@types/babel__core": "^7.20.5",
54
- "@types/node": "^24.12.2",
52
+ "@types/node": "^25.6.0",
55
53
  "@types/react": "^19.2.14",
56
54
  "@types/react-dom": "^19.2.3",
57
55
  "@vitejs/plugin-react": "^6.0.1",
58
56
  "babel-plugin-react-compiler": "^1.0.0",
59
- "eslint": "^10.2.1",
57
+ "eslint": "^10.3.0",
60
58
  "eslint-plugin-react-hooks": "^7.1.1",
61
59
  "eslint-plugin-react-refresh": "^0.5.2",
62
- "globals": "^17.5.0",
63
- "typescript": "~6.0.2",
64
- "typescript-eslint": "^8.58.2",
60
+ "globals": "^17.6.0",
61
+ "typescript": "~6.0.3",
62
+ "typescript-eslint": "^8.59.1",
65
63
  "vite": "^8.0.10"
66
64
  },
67
65
  "peerDependencies": {