✅ next-active-link

Active link component for Next.JS

🔖 Description

next/link wrapper which automatically add the provided class to the link element.

📦 Installation

# Install the component
$ npm install next-active-link

🚀 Usage

The usage is the same as the next/link component. More information in Official docs

The differences are that the next-active-link component has the following props activeClassName and activeMatchOptions .

🟢 ActiveClassName

(Component prop) The class name to be added to the link element when the link is active.

const activeClassName: string = 'active-link'

🟢 ActiveMatchOptions

(Component prop) The options to be used to match the link.

/**
 *  You have the following options:
 */
  const activeMatchOptions_Option_1 = {
    exact: true | false
  }

  const activeMatchOptions_Option_2 = {
    paths: 'exact' | 'partial'        // optional
    queryParams: 'exact' | 'partial'  // optional
    fragment: 'exact'                 // optional
  }

🟢 onActiveChange

(Component method prop) The callback to be called when the link active state changes.

  const onActiveChange: (isActive: boolean) => {
    // ...
  }

🤓 Example

import { ActiveLink } from 'next-active-link';

  function MyPage() {
  /**
   * Adds 'active-link' className to "a" tag
   * if the current page is '/contact'
  */
  return (
    <ActiveLink
      href="/contact"
      activeClassName="active-link"
      onActiveChange={(isActive) => console.log(isActive)}
      {/* Default options */}
      activeMatchOptions={{
        exact: true
      }}
    >
      <a>Contact</a>
    </ActiveLink>
  )


  /** ------------------------------------------------------ */

  function MyPage() {
  /**
   * Adds 'active-link' className to "a" tag
   * if the current page is '/any-page?name=Chempo'
   * (has the exact query params)
  */
  return (
    <ActiveLink
      href="/contact?name=Chempo"
      activeClassName="active-link"
      onActiveChange={(isActive) => console.log(isActive)}
      activeMatchOptions={{
        queryParams: 'exact'
      }}
    >
      <a>Contact</a>
    </ActiveLink>
  )
}

🤓 Happy Code

Created with Typescript! ⚡ and latin music 🎺🎵