clear-react-router 1.3.6 → 1.3.7
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 +13 -1
- package/dist/components/Link.d.ts +2 -1
- package/dist/index.js +20 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,9 +88,21 @@ Component for client-side navigation with prefetch support.
|
|
|
88
88
|
| Prop | Type | Default |
|
|
89
89
|
|------|------|---------|
|
|
90
90
|
| `to` | `string` | required |
|
|
91
|
-
| `prefetch` | `boolean` | `true` |
|
|
91
|
+
| `prefetch` | `boolean` optional | `true` |
|
|
92
|
+
| `prefetchDelay` | `number` optional | `150` | Delay in ms before prefetch starts (prevents unnecessary requests on quick mouse passes) |
|
|
92
93
|
| `children` | `ReactElement` | required |
|
|
93
94
|
|
|
95
|
+
```
|
|
96
|
+
// Default — prefetch after 150ms hover
|
|
97
|
+
<Link to="/dashboard">Dashboard</Link>
|
|
98
|
+
|
|
99
|
+
// Custom prefetch delay (300ms)
|
|
100
|
+
<Link to="/heavy-page" prefetchDelay={300}>Heavy Page</Link>
|
|
101
|
+
|
|
102
|
+
// Disable prefetch
|
|
103
|
+
<Link to="/about" prefetch={false}>About</Link>
|
|
104
|
+
```
|
|
105
|
+
|
|
94
106
|
### `redirect`
|
|
95
107
|
|
|
96
108
|
Function provided to `beforeLoad` for programmatic redirection.
|
|
@@ -6,6 +6,7 @@ type LinkProps = {
|
|
|
6
6
|
style: CSSProperties;
|
|
7
7
|
}>;
|
|
8
8
|
prefetch?: boolean;
|
|
9
|
+
prefetchDelay?: number;
|
|
9
10
|
};
|
|
10
|
-
export declare const Link: ({ children, to, prefetch }: LinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const Link: ({ children, to, prefetch, prefetchDelay }: LinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
package/dist/index.js
CHANGED
|
@@ -545,13 +545,31 @@ var useNavigate = () => {
|
|
|
545
545
|
};
|
|
546
546
|
//#endregion
|
|
547
547
|
//#region components/Link.tsx
|
|
548
|
-
var
|
|
548
|
+
var STANDARD_DELAY = 150;
|
|
549
|
+
var Link = ({ children, to, prefetch = true, prefetchDelay = STANDARD_DELAY }) => {
|
|
549
550
|
const { prefetchLoader } = useRouterActions();
|
|
550
551
|
const navigate = useNavigate();
|
|
552
|
+
const timeout = useRef(0);
|
|
551
553
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
|
|
552
554
|
style: { cursor: "pointer" },
|
|
553
555
|
onClick: () => navigate(to),
|
|
554
|
-
|
|
556
|
+
onMouseEnter: useCallback(() => {
|
|
557
|
+
if (!prefetch || !prefetchDelay) return;
|
|
558
|
+
if (timeout.current) clearTimeout(timeout.current);
|
|
559
|
+
timeout.current = window.setTimeout(() => prefetchLoader(to), prefetchDelay);
|
|
560
|
+
}, [
|
|
561
|
+
prefetch,
|
|
562
|
+
prefetchDelay,
|
|
563
|
+
prefetchLoader,
|
|
564
|
+
to
|
|
565
|
+
]),
|
|
566
|
+
onMouseLeave: useCallback(() => {
|
|
567
|
+
if (!prefetch || !prefetchDelay) return;
|
|
568
|
+
if (timeout.current) {
|
|
569
|
+
clearTimeout(timeout.current);
|
|
570
|
+
timeout.current = 0;
|
|
571
|
+
}
|
|
572
|
+
}, [prefetch, prefetchDelay]),
|
|
555
573
|
children
|
|
556
574
|
});
|
|
557
575
|
};
|