23 lines
669 B
TypeScript
23 lines
669 B
TypeScript
|
import { useRouter } from 'next/router'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
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
|