@ssgoi/react 2.1.1 → 2.2.0
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 +10 -11
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -73,12 +73,12 @@ Define different transitions for different routes:
|
|
|
73
73
|
```tsx
|
|
74
74
|
const config = {
|
|
75
75
|
transitions: [
|
|
76
|
-
//
|
|
77
|
-
{ from: '/home', to: '/about', transition:
|
|
78
|
-
{ from: '/about', to: '/home', transition:
|
|
76
|
+
// Scroll between tabs
|
|
77
|
+
{ from: '/home', to: '/about', transition: scroll({ direction: 'up' }) },
|
|
78
|
+
{ from: '/about', to: '/home', transition: scroll({ direction: 'down' }) },
|
|
79
79
|
|
|
80
|
-
//
|
|
81
|
-
{ from: '/products', to: '/products/*', transition:
|
|
80
|
+
// Drill in when entering details
|
|
81
|
+
{ from: '/products', to: '/products/*', transition: drill({ direction: 'enter' }) },
|
|
82
82
|
|
|
83
83
|
// Pinterest-style image transitions
|
|
84
84
|
{ from: '/gallery', to: '/photo/*', transition: pinterest() }
|
|
@@ -95,7 +95,7 @@ Automatically create bidirectional transitions:
|
|
|
95
95
|
{
|
|
96
96
|
from: '/home',
|
|
97
97
|
to: '/about',
|
|
98
|
-
transition:
|
|
98
|
+
transition: scroll({ direction: 'up' }),
|
|
99
99
|
symmetric: true // Automatically creates reverse transition
|
|
100
100
|
}
|
|
101
101
|
```
|
|
@@ -126,14 +126,14 @@ function Card() {
|
|
|
126
126
|
```tsx
|
|
127
127
|
// app/layout.tsx
|
|
128
128
|
import { Ssgoi } from '@ssgoi/react';
|
|
129
|
-
import {
|
|
129
|
+
import { scroll } from '@ssgoi/react/view-transitions';
|
|
130
130
|
|
|
131
131
|
export default function RootLayout({ children }) {
|
|
132
132
|
return (
|
|
133
133
|
<html>
|
|
134
134
|
<body>
|
|
135
135
|
<Ssgoi config={{
|
|
136
|
-
defaultTransition:
|
|
136
|
+
defaultTransition: scroll({ direction: 'up' })
|
|
137
137
|
}}>
|
|
138
138
|
<div style={{ position: 'relative', minHeight: '100vh' }}>
|
|
139
139
|
{children}
|
|
@@ -206,11 +206,10 @@ Apply transitions to individual elements.
|
|
|
206
206
|
|
|
207
207
|
### Page Transitions (`@ssgoi/react/view-transitions`)
|
|
208
208
|
- `fade()` - Smooth opacity transition
|
|
209
|
-
- `
|
|
210
|
-
- `
|
|
209
|
+
- `scroll()` - Vertical scrolling (up/down)
|
|
210
|
+
- `drill()` - Drill in/out effect (enter/exit)
|
|
211
211
|
- `hero()` - Shared element transitions
|
|
212
212
|
- `pinterest()` - Pinterest-style expand effect
|
|
213
|
-
- `ripple()` - Material Design ripple effect
|
|
214
213
|
|
|
215
214
|
### Element Transitions (`@ssgoi/react/transitions`)
|
|
216
215
|
- `fadeIn()` / `fadeOut()`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ssgoi/react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "React bindings for SSGOI - Native app-like page transitions for React applications",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -44,17 +44,8 @@
|
|
|
44
44
|
"default": "./dist/presets/index.js"
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
|
-
"scripts": {
|
|
48
|
-
"dev": "vite build --watch",
|
|
49
|
-
"build": "tsc -b && vite build",
|
|
50
|
-
"watch": "vite build --watch",
|
|
51
|
-
"lint": "eslint .",
|
|
52
|
-
"preview": "vite preview",
|
|
53
|
-
"package": "vite build",
|
|
54
|
-
"prepare": "pnpm run build"
|
|
55
|
-
},
|
|
56
47
|
"dependencies": {
|
|
57
|
-
"@ssgoi/core": "
|
|
48
|
+
"@ssgoi/core": "2.2.0"
|
|
58
49
|
},
|
|
59
50
|
"peerDependencies": {
|
|
60
51
|
"react": "^19.0.0",
|
|
@@ -69,6 +60,7 @@
|
|
|
69
60
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
70
61
|
"eslint-plugin-react-refresh": "^0.4.20",
|
|
71
62
|
"globals": "^16.3.0",
|
|
63
|
+
"prettier": "^3.6.2",
|
|
72
64
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
73
65
|
"typescript": "~5.8.3",
|
|
74
66
|
"typescript-eslint": "^8.35.1",
|
|
@@ -98,5 +90,13 @@
|
|
|
98
90
|
},
|
|
99
91
|
"engines": {
|
|
100
92
|
"node": ">=18.0.0"
|
|
93
|
+
},
|
|
94
|
+
"scripts": {
|
|
95
|
+
"dev": "vite build --watch",
|
|
96
|
+
"build": "tsc -b && vite build",
|
|
97
|
+
"watch": "vite build --watch",
|
|
98
|
+
"lint": "eslint .",
|
|
99
|
+
"preview": "vite preview",
|
|
100
|
+
"package": "vite build"
|
|
101
101
|
}
|
|
102
|
-
}
|
|
102
|
+
}
|