@atomico/hooks - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "type": "module",
@@ -6,0 +6,0 @@ "exports": {

src/use-router.js

 import { useState, useEffect } from "atomico";
 import { getPath, listener } from "./use-router/history.js";
-import { matches } from "./use-router/matches.js";
+import { matches, getMatch } from "./use-router/matches.js";
 export { redirect, getPath } from "./use-router/history.js";
@@ -50,2 +50,22 @@
 }
+/**
+ * Create a match function to manually compare route matches,
+ * the instance of this hook listens for route changes
+ * @example
+ * ```js
+ * const match = useRouteMatch();
+ *
+ * if(match("/")){
+ *  console.log("in root")
+ * }
+ *
+ * console.log(match("/:id"))
+ * ```
+ * @returns {(path:string)=>import("@uppercod/exp-route").Match}
+ */
+export function useRouteMatch() {
+  const [state, setState] = useState(getPath);
+  useEffect(() => listener(() => setState(getPath)), []);
+  return (path) => getMatch(path)(state);
+}
 
@@ -52,0 +72,0 @@ /**

src/use-router/matches.js

@@ -12,3 +12,4 @@ import { createMatch, getParts, searchParams } from "@uppercod/exp-route";
  */
-const getMatch = (path) => (cache[path] = cache[path] || createMatch(path));
+export const getMatch = (path) =>
+  (cache[path] = cache[path] || createMatch(path));
 /**
@@ -15,0 +16,0 @@ *

use-router.d.ts

@@ -12,2 +12,18 @@ /**
 export function useRoute(path: string, callback?: import("./use-router/matches").RouterCallback): any;
+/**
+ * Create a match function to manually compare route matches,
+ * the instance of this hook listens for route changes
+ * @example
+ * ```js
+ * const match = useRouteMatch();
+ *
+ * if(match("/")){
+ *  console.log("in root")
+ * }
+ *
+ * console.log(match("/:id"))
+ * ```
+ * @returns {(path:string)=>import("@uppercod/exp-route").Match}
+ */
+export function useRouteMatch(): (path: string) => import("@uppercod/exp-route").Match;
 export type InternalState = {
@@ -14,0 +30,0 @@ path?: string;

use-router/matches.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="@uppercod/exp-route" />
+export function getMatch(path: string): import("@uppercod/exp-route").Match<import("@uppercod/exp-route").Params>;
 export function matches(routes: Routes, currentPath: string): any[];
@@ -2,0 +4,0 @@ export type RouterCallback = (params: import("@uppercod/exp-route").Params, search: import("@uppercod/exp-route").Params) => any;

No alert changes

Improved metrics

Total package byte prevSize

24530

increased by4.82%

Lines of code

795

increased by5.16%

No dependency changes