@slithy/modal-spring 0.1.2 → 0.1.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.
- package/README.md +14 -12
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Animated modal adapter for `@slithy/modal-kit`, built on react-spring and @use-gesture/react.
|
|
4
4
|
|
|
5
|
-
Provides animated enter/leave transitions, an animated backdrop, and drag-to-close gesture support.
|
|
5
|
+
Provides animated enter/leave transitions, an animated backdrop, and drag-to-close gesture support.
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -22,13 +22,13 @@ pnpm add @react-spring/web @use-gesture/react
|
|
|
22
22
|
```tsx
|
|
23
23
|
import { LayerProvider, LayerStackPriority } from '@slithy/layers'
|
|
24
24
|
import { Portal } from '@slithy/portal'
|
|
25
|
-
import {
|
|
25
|
+
import { ModalRenderer } from '@slithy/modal-spring'
|
|
26
26
|
|
|
27
27
|
export function App() {
|
|
28
28
|
return (
|
|
29
29
|
<LayerProvider id="app" zIndex={LayerStackPriority.Base}>
|
|
30
30
|
<main>{/* your app */}</main>
|
|
31
|
-
<
|
|
31
|
+
<ModalRenderer
|
|
32
32
|
renderLayer={(children) => (
|
|
33
33
|
<LayerProvider id="modal" zIndex={LayerStackPriority.Modal}>
|
|
34
34
|
{children}
|
|
@@ -41,20 +41,22 @@ export function App() {
|
|
|
41
41
|
}
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
+
`renderLayer` and `renderPortal` are optional — omit them if you don't use `@slithy/layers` or `@slithy/portal`.
|
|
45
|
+
|
|
44
46
|
---
|
|
45
47
|
|
|
46
48
|
## Usage
|
|
47
49
|
|
|
48
50
|
```tsx
|
|
49
51
|
import { useModalStore } from '@slithy/modal-core'
|
|
50
|
-
import {
|
|
52
|
+
import { Modal } from '@slithy/modal-spring'
|
|
51
53
|
|
|
52
54
|
function MyButton() {
|
|
53
55
|
const open = (event: React.MouseEvent) => {
|
|
54
56
|
useModalStore.getState().openModal(
|
|
55
|
-
<
|
|
57
|
+
<Modal aria-label="My Modal">
|
|
56
58
|
<p>Content</p>
|
|
57
|
-
</
|
|
59
|
+
</Modal>,
|
|
58
60
|
{ triggerEvent: event }
|
|
59
61
|
)
|
|
60
62
|
}
|
|
@@ -64,7 +66,7 @@ function MyButton() {
|
|
|
64
66
|
|
|
65
67
|
---
|
|
66
68
|
|
|
67
|
-
##
|
|
69
|
+
## Modal Props
|
|
68
70
|
|
|
69
71
|
| Prop | Type | Default | Description |
|
|
70
72
|
|---|---|---|---|
|
|
@@ -89,14 +91,14 @@ function MyButton() {
|
|
|
89
91
|
|
|
90
92
|
| Export | Description |
|
|
91
93
|
|---|---|
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
+
| `Modal` | Animated modal component |
|
|
95
|
+
| `ModalProps` | — |
|
|
96
|
+
| `ModalRenderer` | Renders all open modals with animated backdrop |
|
|
97
|
+
| `ModalBackdrop` | Animated backdrop (used by `ModalRenderer`) |
|
|
94
98
|
| `DragHandle` | Drag-to-close gesture wrapper |
|
|
95
99
|
| `useModalDrag` | Low-level drag hook |
|
|
96
|
-
| `
|
|
100
|
+
| `useModalDragging` | Internal drag spring hook |
|
|
97
101
|
| `defaultSpring` | Default spring config |
|
|
98
102
|
| `iosSheetSpring` | iOS-feel spring config |
|
|
99
|
-
| `useModalDragging` | Internal drag spring hook |
|
|
100
103
|
| `DragDirection` | `'up' \| 'down' \| 'left' \| 'right'` |
|
|
101
104
|
| `DragStyles` | Spring transform values from drag |
|
|
102
|
-
| `SpringModalProps` | — |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slithy/modal-spring",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "React Spring animation adapter for @slithy/modal-kit.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"*.css"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@slithy/modal-kit": "0.1.2",
|
|
20
19
|
"@slithy/modal-core": "0.1.2",
|
|
20
|
+
"@slithy/modal-kit": "0.1.3",
|
|
21
21
|
"@slithy/utils": "0.3.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"tsup": "^8",
|
|
41
41
|
"typescript": "^5",
|
|
42
42
|
"vitest": "^4.1.2",
|
|
43
|
-
"@slithy/
|
|
44
|
-
"@slithy/
|
|
43
|
+
"@slithy/eslint-config": "0.0.0",
|
|
44
|
+
"@slithy/tsconfig": "0.0.0"
|
|
45
45
|
},
|
|
46
46
|
"author": "mjcampagna",
|
|
47
47
|
"license": "ISC",
|