Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/chempogonzalez/next-active-link
- Owner: chempogonzalez
- Created: 2022-05-02T00:06:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-05-08T03:04:34.000Z (over 2 years ago)
- Last Synced: 2024-12-15T08:54:06.828Z (about 1 month ago)
- Language: TypeScript
- Size: 213 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 πΊπ΅