clear-react-router 1.9.3 → 1.9.4

package/README.md

@@ -107,6 +107,8 @@ Component for client-side navigation with prefetch support, active state detecti
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `to` | `string` | required | Target path |
+| `as` | `(props: ElementProps<T>) => ReactElement` | renders `<a>` | Render prop for using a custom element/component instead of the default `<a>`. Receives the computed isActive and isPending values, event handlers, and ref to attach to your own element |
+| `exact` | `boolean` | `false` | When `false`, the link is also considered active if the current URL starts with `to` (useful for nested routes) |
 | `prefetch` | `'hover' \| 'render' \| 'viewport' \| 'none'` | `Router` config | Override the global prefetch strategy |
 | `hoverPrefetchDelay` | `number` | `Router` config | Override the global hover delay |
 | `children` | `ReactNode` | required | Content to render inside the link |
@@ -120,7 +122,7 @@ Component for client-side navigation with prefetch support, active state detecti
 
 | State | Type | Description |
 |-------|------|-------------|
-| `isActive` | `boolean` | `true` when the link's `to` matches the current URL |
+| `isActive` | `boolean` | `true` when the link's `to` matches the current URL considering `exact` value |
 | `isPending` | `boolean` | `true` when the target route is currently loading (loader is running) |
 
 ### Prefetch Strategies
@@ -137,6 +139,22 @@ Component for client-side navigation with prefetch support, active state detecti
 ```tsx
 import { Router, Link } from 'clear-react-router';
 
+// Render a custom element/component via `as`. The function receives ref, event handlers, isActive/isPending and must render them itself
+import { Button } from '@mui/material';
+
+<Link
+  to="/dashboard"
+  as={({ isActive, isPending, ...props }) => (
+    <Button
+      {...props}
+      variant={isActive ? 'contained' : 'outlined'}
+      sx={{ opacity: isPending ? 0.5 : 1 }}
+    />
+  )}
+>
+  Dashboard
+</Link>
+
 // Global prefetch: hover with 100ms delay
 <Router routes={routes} prefetch="hover" hoverPrefetchDelay={100} />
 
@@ -169,6 +187,12 @@ import { Router, Link } from 'clear-react-router';
 <Link to="/details" beforeNavigate={saveDashboardData}>
   Admin Panel
 </Link>
+
+// `exact={false}` — active for nested routes too
+// e.g. active when current URL is "/settings" or "/settings/profile"
+<Link to="/settings" exact={false}>
+  Settings
+</Link>
 ```
 **Important**: prefetch="render" should be used sparingly, as it preloads data immediately when the link is rendered, which may cause unnecessary network requests.
 

package/dist/components/Link.d.ts

@@ -1,19 +1,33 @@
-import { type CSSProperties, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { type CSSProperties, ReactNode, MouseEvent, ReactElement, Ref } from 'react';
 import { RouterProps } from '../types';
 type States = {
     isActive: boolean;
     isPending: boolean;
 };
-type LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'className' | 'style'> & {
+type ElementProps<T extends HTMLElement = HTMLElement> = {
+    ref: Ref<T>;
+    href: string;
+    isActive: boolean;
+    isPending: boolean;
+    onClick(event: MouseEvent): void;
+    onMouseEnter(event: MouseEvent): void;
+    onMouseLeave(event: MouseEvent): void;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+type LinkProps<T extends HTMLElement = HTMLAnchorElement> = {
     to: string;
-    children: ReactNode;
+    children?: ReactNode;
+    as?: (props: ElementProps<T>) => ReactElement;
     prefetch?: RouterProps['prefetch'];
     hoverPrefetchDelay?: number;
-    style?: CSSProperties | ((arg: States) => CSSProperties);
     className?: string | ((arg: States) => string);
     activeClassName?: string;
     pendingClassName?: string;
     beforeNavigate?(): Promise<void>;
+    style?: CSSProperties | ((arg: States) => CSSProperties);
+    exact?: boolean;
 };
-export declare const Link: ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, activeClassName, pendingClassName, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: <T extends HTMLElement = HTMLAnchorElement>({ children, to, as, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, exact, activeClassName, pendingClassName, }: LinkProps<T>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/index.js

@@ -44,7 +44,7 @@ var createCommitState = ({ routeItemDataState, pendingState }) => (nextLocation,
 //#region constants.ts
 var emptyLoaderState = {};
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -54,7 +54,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -66,13 +66,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -756,12 +756,13 @@ var useLocation = () => {
 };
 //#endregion
 //#region components/Link.tsx
-var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
+var defaultAs = ({ isActive, isPending, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props });
+var Link = ({ children, to, as = defaultAs, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, exact = false, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
 	const isPending = useIsRoutePending(to);
 	const { pathname } = useLocation();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
-	const ref = useRef(null);
+	const elementRef = useRef(null);
 	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
 	const prefetch = prefetchLink || configPrefetch;
 	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
@@ -789,17 +790,19 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, classNam
 	}, [prefetch, to]);
 	useEffect(() => {
 		if (prefetch !== "viewport") return;
-		const element = ref.current;
+		const element = elementRef.current;
+		if (!element) return;
 		const observer = new IntersectionObserver(async () => {
 			await router.runtime.prefetch(to);
 			observer.disconnect();
 		});
-		if (element) observer.observe(element);
-		return () => {
-			if (element) observer.disconnect();
-		};
+		observer.observe(element);
+		return () => observer.disconnect();
 	}, [prefetch, to]);
-	const isActive = to === pathname;
+	useEffect(() => () => {
+		if (timeout.current) clearTimeout(timeout.current);
+	}, []);
+	const isActive = to === "/" ? pathname === "/" : exact ? pathname === to : pathname === to || pathname?.startsWith(`${to}/`);
 	const normalizedClassName = typeof className === "function" ? className({
 		isActive,
 		isPending
@@ -814,18 +817,21 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, classNam
 		normalizedClassName
 	].filter(Boolean).join(" ");
 	const clickHandler = async (event) => {
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
 		event.preventDefault();
 		await beforeNavigate?.();
 		await navigate(to);
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+	return as({
+		ref: elementRef,
 		href: to,
-		ref,
 		style: normalizedStyle,
 		className: resultClassName,
 		onClick: clickHandler,
 		onMouseEnter,
 		onMouseLeave,
+		isActive,
+		isPending,
 		children
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-react-router",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {