cal.pub0.org/components/ActiveLink.tsx

23 lines
644 B
TypeScript
Raw Normal View History

import Link from "next/link";
import { useRouter } from "next/router";
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;