Extend types to cover className function.

molefrog · Mar 8, 2024 · 4b204d4 · 4b204d4
1 parent acaf4a7
commit 4b204d4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/packages/wouter-preact/types/index.d.ts b/packages/wouter-preact/types/index.d.ts
@@ -88,11 +88,15 @@ type AsChildProps<ComponentProps, DefaultElementProps> =
   | ({ asChild?: false } & DefaultElementProps)
   | ({ asChild: true } & ComponentProps);
 
+type HTMLLinkAttributes = Omit<JSX.HTMLAttributes, "className"> & {
+  className?: string | undefined | ((isActive: boolean) => string | undefined);
+};
+
 export type LinkProps<H extends BaseLocationHook = BrowserLocationHook> =
   NavigationalProps<H> &
     AsChildProps<
       { children: ComponentChildren; onClick?: JSX.MouseEventHandler<Element> },
-      JSX.HTMLAttributes
+      HTMLLinkAttributes
     >;
 
 export type RedirectProps<H extends BaseLocationHook = BrowserLocationHook> =

diff --git a/packages/wouter/test/link.test-d.tsx b/packages/wouter/test/link.test-d.tsx
@@ -39,6 +39,18 @@ describe("<Link /> types", () => {
     </Link>;
   });
 
+  it("can accept function as `className`", () => {
+    <Link
+      href="/"
+      className={(isActive) => (isActive ? "active" : "non-active")}
+    />;
+
+    <Link
+      href="/"
+      className={(isActive) => (isActive ? "active" : undefined)}
+    />;
+  });
+
   it("should support other navigation params", () => {
     <Link href="/" state={{ a: "foo" }}>
       test

diff --git a/packages/wouter/types/index.d.ts b/packages/wouter/types/index.d.ts
@@ -103,11 +103,18 @@ type AsChildProps<ComponentProps, DefaultElementProps> =
   | ({ asChild?: false } & DefaultElementProps)
   | ({ asChild: true } & ComponentProps);
 
+type HTMLLinkAttributes = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "className"
+> & {
+  className?: string | undefined | ((isActive: boolean) => string | undefined);
+};
+
 export type LinkProps<H extends BaseLocationHook = BrowserLocationHook> =
   NavigationalProps<H> &
     AsChildProps<
       { children: ReactElement; onClick?: MouseEventHandler },
-      AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
+      HTMLLinkAttributes & RefAttributes<HTMLAnchorElement>
     >;
 
 export function Link<H extends BaseLocationHook = BrowserLocationHook>(