cal.pub0.org/components/ActiveLink.tsx

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