Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chempogonzalez/next-active-link

βœ… Active link component for Next.JS, wrapping next/link component
https://github.com/chempogonzalez/next-active-link

Last synced: 13 days ago
JSON representation

βœ… Active link component for Next.JS, wrapping next/link component

Awesome Lists containing this project

README

        

# βœ… next-active-link [![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

> Active link component for Next.JS

## πŸ”– Description
`next/link` wrapper which automatically add the provided class to the link element.

## πŸ“¦ Installation
```zsh
# Install the component
$ npm install next-active-link
```

## πŸš€ Usage
The usage is the same as the `next/link` component. More information in [Official docs](https://nextjs.org/docs/api-reference/next/link)

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.
```ts
const activeClassName: string = 'active-link'
```

### 🟒 ActiveMatchOptions
_(Component prop)_ The options to be used to match the link.
```ts
/**
* 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.
```ts
const onActiveChange: (isActive: boolean) => {
// ...
}
```

## πŸ€“ Example
```tsx
import { ActiveLink } from 'next-active-link';

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

)

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

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

)
}
```

## πŸ€“ Happy Code

> Created with Typescript! ⚑ and latin music 🎺🎡