navigation-kit 0.0.1 → 0.0.2

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 CHANGED
@@ -52,11 +52,10 @@ const router = createRouter(routes);
52
52
  **Type parameters:**
53
53
 
54
54
  ```ts
55
- createRouter<TRoutes, TNavigateOptions = void>(routes, adapter?)
55
+ createRouter<TRoutes>(routes, adapter?)
56
56
  ```
57
57
 
58
58
  - `TRoutes` — inferred from the routes argument; use `as const` on your routes object
59
- - `TNavigateOptions` — type of the `options` argument forwarded to `navigate` (e.g. `NavigateOptions` from react-router). Defaults to `void`.
60
59
 
61
60
  ---
62
61
 
@@ -125,12 +124,14 @@ match?.params.id; // "42"
125
124
 
126
125
  ---
127
126
 
128
- #### `router.useRouter(navigate, pathname)`
127
+ #### `router.createNavigator<TNavigateOptions>(navigate, pathname)`
129
128
 
130
129
  Creates navigation helpers by injecting a `navigate` function and the current `pathname`. Designed to be called inside a framework hook.
131
130
 
131
+ The generic `TNavigateOptions` types the `options` argument forwarded to `navigate` (e.g. `NavigateOptions` from react-router). Defaults to `void`.
132
+
132
133
  ```ts
133
- const { to, match, path } = router.useRouter(navigate, pathname);
134
+ const { to, match, path } = router.createNavigator(navigate, pathname);
134
135
 
135
136
  to("about"); // navigates to "/about"
136
137
  to("user", { id: "42" }); // navigates to "/users/42"
@@ -154,11 +155,11 @@ export const makeRouter = <const TRoutes extends RouteMap>(routes: TRoutes) => {
154
155
 
155
156
  return {
156
157
  ...router,
157
- useRouter: () => {
158
+ useNavigator: () => {
158
159
  const navigate = useNavigate();
159
160
  const { pathname } = useLocation();
160
161
  return useMemo(
161
- () => router.useRouter(navigate, pathname),
162
+ () => router.createNavigator(navigate, pathname),
162
163
  [navigate, pathname]
163
164
  );
164
165
  },
@@ -181,14 +182,53 @@ Both have built-in defaults (implementations copied from react-router, no runtim
181
182
 
182
183
  ## Navigate options
183
184
 
184
- Pass a second type parameter to type the options forwarded through `to()`:
185
+ Pass a type parameter to `createNavigator` to type the options forwarded through `to()`:
185
186
 
186
187
  ```ts
187
188
  import { NavigateOptions } from "react-router";
188
189
 
189
- const router = createRouter<typeof routes, NavigateOptions>(routes);
190
-
191
- const { to } = router.useRouter(navigate, pathname);
190
+ const { to } = router.createNavigator<NavigateOptions>(navigate, pathname);
192
191
  to("about", undefined, { replace: true });
193
192
  to("user", { id: "42" }, { state: { from: "/" } });
194
193
  ```
194
+
195
+ ## Define once, import anywhere
196
+
197
+ The intended pattern is to create the router in one place and import it wherever navigation is needed — keeping route definitions as the single source of truth.
198
+
199
+ ```ts
200
+ // router.ts — define once
201
+ import { createRouter } from "navigation-kit";
202
+
203
+ const routes = {
204
+ home: "/",
205
+ user: "/users/:id",
206
+ } as const;
207
+
208
+ export const Router = createRouter(routes);
209
+ ```
210
+
211
+ ```ts
212
+ // useRouter.ts — wrap in a framework hook
213
+ import { useMemo } from "react";
214
+ import { useNavigate, useLocation, NavigateOptions } from "react-router";
215
+ import { Router } from "./router";
216
+
217
+ export const useRouter = () => {
218
+ const navigate = useNavigate();
219
+ const { pathname } = useLocation();
220
+
221
+ return useMemo(
222
+ () => Router.createNavigator<NavigateOptions>(navigate, pathname),
223
+ [navigate, pathname]
224
+ );
225
+ };
226
+ ```
227
+
228
+ ```ts
229
+ // SomeComponent.tsx — use anywhere
230
+ import { useRouter } from "./useRouter";
231
+
232
+ const { to, match } = useRouter();
233
+ to("user", { id: "42" });
234
+ ```
@@ -18,7 +18,7 @@ export declare const createRouter: <const TRoutes extends RouteMap>(routes: TRou
18
18
  <R extends RoutesWithParams<TRoutes>>(route: R, params: RouteParams<TRoutes[R]>): string;
19
19
  };
20
20
  match: <R extends keyof TRoutes>(route: R, pathname: string) => PathMatch | null;
21
- useRouter: <TNavigateOptions = void>(navigate: (path: string, options?: TNavigateOptions) => void, pathname: string) => {
21
+ createNavigator: <TNavigateOptions = void>(navigate: (path: string, options?: TNavigateOptions) => void, pathname: string) => {
22
22
  to: {
23
23
  <R extends RoutesWithoutParams<TRoutes>>(route: R, params?: never, options?: TNavigateOptions): void;
24
24
  <R extends RoutesWithParams<TRoutes>>(route: R, params: RouteParams<TRoutes[R]>, options?: TNavigateOptions): void;
@@ -20,7 +20,7 @@ const createRouter = (routes, adapter = {}) => {
20
20
  const handleMatch = (route, pathname) => {
21
21
  return _matchPath(handlePattern(route), pathname);
22
22
  };
23
- const handleUseRouter = (navigate, pathname) => {
23
+ const handleCreateNavigator = (navigate, pathname) => {
24
24
  function handleTo(route, params, options) {
25
25
  navigate(_generatePath(handlePattern(route).path, params), options);
26
26
  }
@@ -36,7 +36,7 @@ const createRouter = (routes, adapter = {}) => {
36
36
  path: handlePath,
37
37
  url: handleUrl,
38
38
  match: handleMatch,
39
- useRouter: handleUseRouter
39
+ createNavigator: handleCreateNavigator
40
40
  };
41
41
  };
42
42
  exports.createRouter = createRouter;
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "navigation-kit",
3
3
  "type": "commonjs",
4
- "version": "0.0.1",
4
+ "version": "0.0.2",
5
5
  "author": "Kris Papercut <krispcut@gmail.com>",
6
- "description": "",
6
+ "description": "Framework-agnostic typed routing utility for TypeScript",
7
7
  "license": "MIT",
8
8
  "main": "lib/index.js",
9
9
  "types": "lib/index.d.ts",