Proposal: expose a context to check whether we are the active link #524

ruihe774 · 2025-04-13T13:21:40Z

ruihe774
Apr 13, 2025

Children of A usually need to react to the active state. Currently, it can only be implemented by useMatch or useLocation. A has already the logic of active state checking, so why not exposing it to its descents through a context? As one of the benefits, the active state obtained by the descents through a context is consistent with the end prop on A.

I made a POC:

diff --git a/dist/components.d.ts b/dist/components.d.ts
index 212136cf15280b27a20ba7cc858b891c69f3bb1a..58fdaaa684e0079c3c3e8730a08f1808e79eb932 100644
--- a/dist/components.d.ts
+++ b/dist/components.d.ts
@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX, Context, Accessor } from "solid-js";
 import type { Location, Navigator } from "./types.js";
 declare module "solid-js" {
     namespace JSX {
@@ -11,6 +11,7 @@ declare module "solid-js" {
         }
     }
 }
+export declare const IsActiveContext: Context<Accessor<boolean>>;
 export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
     href: string;
     replace?: boolean | undefined;
diff --git a/dist/components.jsx b/dist/components.jsx
index beb82ec6c6c8cf95b7cdc2a2b9baebf9fc6637cf..753fa2cb4c7359c11cc7a9a169b1043cafddf265 100644
--- a/dist/components.jsx
+++ b/dist/components.jsx
@@ -1,6 +1,9 @@
-import { createMemo, mergeProps, splitProps } from "solid-js";
+import { createMemo, mergeProps, splitProps, createContext } from "solid-js";
 import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing.js";
 import { normalizePath } from "./utils.js";
+
+export const IsActiveContext = createContext();
+
 export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
     const [, rest] = splitProps(props, [
@@ -22,12 +25,16 @@ export function A(props) {
         const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
         return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
     });
-    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
-            ...(props.class && { [props.class]: true }),
-            [props.inactiveClass]: !isActive()[0],
-            [props.activeClass]: isActive()[0],
-            ...rest.classList
-        }} link aria-current={isActive()[1] ? "page" : undefined}/>);
+    return (
+        <IsActiveContext.Provider value={() => isActive()[0]}>
+            <a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
+                ...(props.class && { [props.class]: true }),
+                [props.inactiveClass]: !isActive()[0],
+                [props.activeClass]: isActive()[0],
+                ...rest.classList
+            }} link aria-current={isActive()[1] ? "page" : undefined}/>
+        </IsActiveContext.Provider>
+    );
 }
 export function Navigate(props) {
     const navigate = useNavigate();

And with this we can easily retrieve the active state in descent compoments:

function LinkText(props) {
    const isActive = useContext(IsActiveContext);
    return <span>{isActive() ? `[${props.text}]` : props.text}</span>;
}

function Nav(props) {
    return (
        <nav>
            <For each={/* items */}>
                {(item) => (
                    <A href={item().href}>
                        <LinkText text={item().title} />
                    </A>
                }
            </For>
        </nav>
    )
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Proposal: expose a context to check whether we are the active link #524

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Proposal: expose a context to check whether we are the active link #524

Uh oh!

ruihe774 Apr 13, 2025

Replies: 0 comments

ruihe774
Apr 13, 2025