d194878bb2
* Suggestion: let prettier sort imports order # Conflicts: # yarn.lock * AUTO SORT ALL THE IMPORTS * Linting * Fixes test
22 lines
644 B
TypeScript
22 lines
644 B
TypeScript
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;
|