@dnd-kit/solid 0.3.0-beta-20260214232144 → 0.3.0-beta-20260214235656
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 +50 -6
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,16 +2,60 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://npm.im/@dnd-kit/solid)
|
|
4
4
|
|
|
5
|
-
The SolidJS
|
|
5
|
+
The SolidJS adapter for **@dnd-kit** — a lightweight, performant, and extensible drag and drop toolkit. Built on top of `@dnd-kit/dom`.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```
|
|
9
|
+
```bash
|
|
12
10
|
npm install @dnd-kit/solid
|
|
13
11
|
```
|
|
14
12
|
|
|
15
|
-
##
|
|
13
|
+
## Quick start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import {createSignal} from 'solid-js';
|
|
17
|
+
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';
|
|
18
|
+
|
|
19
|
+
function Draggable() {
|
|
20
|
+
const {ref} = useDraggable({id: 'draggable'});
|
|
21
|
+
return <button ref={ref}>Drag me</button>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function Droppable(props) {
|
|
25
|
+
const {ref} = useDroppable({id: 'droppable'});
|
|
26
|
+
return <div ref={ref}>{props.children}</div>;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
const [parent, setParent] = createSignal(null);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<DragDropProvider
|
|
34
|
+
onDragEnd={(event) => {
|
|
35
|
+
if (event.canceled) return;
|
|
36
|
+
setParent(event.operation.target?.id ?? null);
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
{parent() == null ? <Draggable /> : null}
|
|
40
|
+
<Droppable>{parent() ? <Draggable /> : 'Drop here'}</Droppable>
|
|
41
|
+
</DragDropProvider>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Hooks
|
|
47
|
+
|
|
48
|
+
| Hook | Import | Description |
|
|
49
|
+
|---|---|---|
|
|
50
|
+
| `useDraggable` | `@dnd-kit/solid` | Make an element draggable |
|
|
51
|
+
| `useDroppable` | `@dnd-kit/solid` | Create a drop target |
|
|
52
|
+
| `useSortable` | `@dnd-kit/solid/sortable` | Combine drag and drop with sorting |
|
|
53
|
+
|
|
54
|
+
## Components
|
|
55
|
+
|
|
56
|
+
- **`<DragDropProvider>`** — Wraps your drag and drop interface, manages sensors, plugins, and events.
|
|
57
|
+
- **`<DragOverlay>`** — Renders a custom overlay element during drag operations.
|
|
58
|
+
|
|
59
|
+
## Documentation
|
|
16
60
|
|
|
17
|
-
Visit [
|
|
61
|
+
Visit [next.dndkit.com](https://next.dndkit.com/solid) for full documentation, guides, and interactive examples.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnd-kit/solid",
|
|
3
|
-
"version": "0.3.0-beta-
|
|
3
|
+
"version": "0.3.0-beta-20260214235656",
|
|
4
4
|
"main": "./index.cjs",
|
|
5
5
|
"module": "./index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@dnd-kit/abstract": "0.3.0-beta-
|
|
59
|
-
"@dnd-kit/dom": "0.3.0-beta-
|
|
60
|
-
"@dnd-kit/state": "0.3.0-beta-
|
|
58
|
+
"@dnd-kit/abstract": "0.3.0-beta-20260214235656",
|
|
59
|
+
"@dnd-kit/dom": "0.3.0-beta-20260214235656",
|
|
60
|
+
"@dnd-kit/state": "0.3.0-beta-20260214235656",
|
|
61
61
|
"tslib": "^2.6.2"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|