23 lines
644 B
TypeScript
23 lines
644 B
TypeScript
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
import React, { Children } from "react";
|
|
|
|
const ActiveLink = ({ children, activeClassName, ...props }) => {
|
|
const { asPath } = useRouter();
|
|
const child = Children.only(children);
|
|
const childClassName = child.props.className || "";
|
|
|
|
const className =
|
|
asPath === props.href || asPath === props.as
|
|
? `${childClassName} ${activeClassName}`.trim()
|
|
: childClassName;
|
|
|
|
return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
|
|
};
|
|
|
|
ActiveLink.defaultProps = {
|
|
activeClassName: "active",
|
|
} as Partial<Props>;
|
|
|
|
export default ActiveLink;
|