22 lines
630 B
TypeScript
22 lines
630 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 |