@ahnseungchan/webviewkit 1.0.2 → 1.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.
- package/README.md +149 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# WebViewKit
|
|
2
|
+
|
|
3
|
+
A modern React library for building stack-based navigation in WebView applications, providing smooth transitions and native-like navigation experience.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🚀 **Stack-based Navigation**: Native-like navigation with push/pop transitions
|
|
8
|
+
- 🎨 **Smooth Animations**: GSAP-powered animations for fluid page transitions
|
|
9
|
+
- 📱 **Mobile-First**: Designed specifically for WebView and mobile applications
|
|
10
|
+
- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
|
|
11
|
+
- 🎯 **Flexible**: Customizable animations, layouts, and navigation behavior
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @webviewkit
|
|
17
|
+
# or
|
|
18
|
+
yarn add @webviewkit
|
|
19
|
+
# or
|
|
20
|
+
pnpm add @webviewkit
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import React from "react";
|
|
27
|
+
import { StackRouterProvider } from "@webviewkit";
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<StackRouterProvider
|
|
32
|
+
maxWidth="600px"
|
|
33
|
+
Activities={[
|
|
34
|
+
{
|
|
35
|
+
path: "/",
|
|
36
|
+
element: <HomePage />,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
path: "/about",
|
|
40
|
+
element: <AboutPage />,
|
|
41
|
+
},
|
|
42
|
+
]}
|
|
43
|
+
initialActivity={{ path: "/", element: <HomePage /> }}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Usage
|
|
50
|
+
|
|
51
|
+
### Basic Navigation
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { useStackRouter } from "@webviewkit/core";
|
|
55
|
+
|
|
56
|
+
function HomePage() {
|
|
57
|
+
const { push, back } = useStackRouter();
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<div>
|
|
61
|
+
<h1>Home</h1>
|
|
62
|
+
<button onClick={() => push("/about")}>Go to About</button>
|
|
63
|
+
<button onClick={back}>Back</button>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### History Management
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { history } from "@webviewkit";
|
|
73
|
+
|
|
74
|
+
// Navigate to a new page
|
|
75
|
+
await history.push("/new-page", { data: "some data" });
|
|
76
|
+
|
|
77
|
+
// Replace current page
|
|
78
|
+
await history.replace("/replacement-page", { data: "replacement data" });
|
|
79
|
+
|
|
80
|
+
// Go back
|
|
81
|
+
await history.back();
|
|
82
|
+
|
|
83
|
+
// Go forward
|
|
84
|
+
await history.forward();
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## API Reference
|
|
88
|
+
|
|
89
|
+
### StackRouterProvider Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Default | Description |
|
|
92
|
+
| ----------------- | ------------------------------------------------- | --------- | ------------------------------------- |
|
|
93
|
+
| `maxWidth` | `string` | `"600px"` | Maximum width of the layout container |
|
|
94
|
+
| `isShowHeader` | `boolean` | `true` | Whether to show the header |
|
|
95
|
+
| `Activities` | `Array<{path: string, element: React.ReactNode}>` | `[]` | Array of available routes |
|
|
96
|
+
| `initialActivity` | `{path: string, element: React.ReactNode}` | - | Initial route to display |
|
|
97
|
+
|
|
98
|
+
### useStackRouter Hook
|
|
99
|
+
|
|
100
|
+
Returns an object with navigation methods:
|
|
101
|
+
|
|
102
|
+
- `currentPath`: Current active path
|
|
103
|
+
- `currentState`: Current history state
|
|
104
|
+
- `push(path, data?)`: Navigate to a new page
|
|
105
|
+
- `replace(path, data?)`: Replace current page
|
|
106
|
+
- `back()`: Go back to previous page
|
|
107
|
+
- `forward()`: Go forward to next page
|
|
108
|
+
|
|
109
|
+
### History API
|
|
110
|
+
|
|
111
|
+
- `history.push(path, data?)`: Add new history entry
|
|
112
|
+
- `history.replace(path, data?)`: Replace current history entry
|
|
113
|
+
- `history.back()`: Go back to previous entry
|
|
114
|
+
- `history.forward()`: Go forward to next entry
|
|
115
|
+
- `history.go(delta)`: Go to specific history entry
|
|
116
|
+
- `history.getCurrentState()`: Get current history state
|
|
117
|
+
- `history.addListener(listener)`: Add history change listener
|
|
118
|
+
|
|
119
|
+
## Examples
|
|
120
|
+
|
|
121
|
+
See the `packages/browser` directory for complete examples.
|
|
122
|
+
|
|
123
|
+
## Development
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
# Install dependencies
|
|
127
|
+
pnpm install
|
|
128
|
+
|
|
129
|
+
# Build all packages
|
|
130
|
+
pnpm build
|
|
131
|
+
|
|
132
|
+
# Run tests
|
|
133
|
+
pnpm test
|
|
134
|
+
|
|
135
|
+
# Run linting
|
|
136
|
+
pnpm lint
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## Contributing
|
|
140
|
+
|
|
141
|
+
1. Fork the repository
|
|
142
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
143
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
144
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
145
|
+
5. Open a Pull Request
|
|
146
|
+
|
|
147
|
+
## License
|
|
148
|
+
|
|
149
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|