preact-hashish-router 0.0.9 → 0.0.11
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 +93 -1
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -1 +1,93 @@
|
|
|
1
|
-
# Preact Hashish Router
|
|
1
|
+
# Preact Hashish Router
|
|
2
|
+
|
|
3
|
+
## Features
|
|
4
|
+
|
|
5
|
+
- `hash` and `browser` routing types.
|
|
6
|
+
- Support for lazy-loaded routes (`lazy` loading).
|
|
7
|
+
- Error handling integration with `ErrorRoute`.
|
|
8
|
+
- Fully typed.
|
|
9
|
+
- Ultra lightweight.
|
|
10
|
+
- No external dependencies.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install preact-hashish-router@latest
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
### Context Setup
|
|
21
|
+
|
|
22
|
+
First, ensure your application is wrapped within the router context. This will allow you to access routes and related functions.
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { ErrorRoute, Route, Router, RouterErrorBoundary } from "preact-hashish-router";
|
|
26
|
+
import _404 from "./routes/404";
|
|
27
|
+
import AboutPage from "./routes/About";
|
|
28
|
+
import HomePage from "./routes/Home";
|
|
29
|
+
|
|
30
|
+
export default function App() {
|
|
31
|
+
return (
|
|
32
|
+
<Router type="hash">
|
|
33
|
+
<RouterErrorBoundary>
|
|
34
|
+
<Route path="/">
|
|
35
|
+
<HomePage />
|
|
36
|
+
</Route>
|
|
37
|
+
|
|
38
|
+
<Route path="/about">
|
|
39
|
+
<AboutPage />
|
|
40
|
+
</Route>
|
|
41
|
+
|
|
42
|
+
<ErrorRoute>
|
|
43
|
+
<_404 />
|
|
44
|
+
</ErrorRoute>
|
|
45
|
+
</RouterErrorBoundary>
|
|
46
|
+
</Router>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Using the `useRouter` Hook
|
|
52
|
+
|
|
53
|
+
The `useRouter` hook gives you access to the router context to programmatically navigate or retrieve information about the current route.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { useRouter } from "preact-hashish-router";
|
|
57
|
+
|
|
58
|
+
function HomePage() {
|
|
59
|
+
const router = useRouter();
|
|
60
|
+
|
|
61
|
+
function goToAbout() {
|
|
62
|
+
router.go("/about");
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<div>
|
|
67
|
+
<h1>Home Page</h1>
|
|
68
|
+
<button onClick={goToAbout}>Go to About</button>
|
|
69
|
+
</div>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### `<A />` Component for Navigation
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { A } from "preact-hashish-router";
|
|
78
|
+
|
|
79
|
+
export default function Header() {
|
|
80
|
+
return (
|
|
81
|
+
<header>
|
|
82
|
+
<nav>
|
|
83
|
+
<A href="/">Home</A>
|
|
84
|
+
<A href="/about">About</A>
|
|
85
|
+
</nav>
|
|
86
|
+
</header>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Development
|
|
92
|
+
|
|
93
|
+
If you have any improvements or find any issues, feel free to contribute or open an issue in the associated repository.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "preact-hashish-router",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"description": "A simple router for preact",
|
|
@@ -28,7 +28,14 @@
|
|
|
28
28
|
"hash"
|
|
29
29
|
],
|
|
30
30
|
"target": "es2020",
|
|
31
|
-
"author":
|
|
31
|
+
"author": {
|
|
32
|
+
"name": "LiasCode",
|
|
33
|
+
"email": "liascode.dev@gmail.com",
|
|
34
|
+
"url": "https://lias-code.pages.dev"
|
|
35
|
+
},
|
|
36
|
+
"repository": {
|
|
37
|
+
"url": "https://github.com/LiasCode/preact-hashish-router"
|
|
38
|
+
},
|
|
32
39
|
"devDependencies": {
|
|
33
40
|
"@preact/preset-vite": "^2.10.1",
|
|
34
41
|
"@types/node": "^22.13.4",
|