Welcome to Better Link, a lightweight and powerful enhancement for Next.js Link components. This library automatically detects active routes and provides intuitive APIs for handling active states, all with complete TypeScript support.
- Automatic Active Route Detection: Simplifies route management by automatically determining which links are active.
- Intuitive APIs: Provides easy-to-use methods for handling active states.
- TypeScript Support: Fully supports TypeScript, ensuring type safety and reducing runtime errors.
- Lightweight: Minimal footprint, keeping your application fast and efficient.
- Open Source: Contribute and improve the library with the community.
To install Better Link, run the following command:
npm install better-linkor
yarn add better-linkUsing Better Link is straightforward. Here’s a quick example:
import { BetterLink } from 'better-link';
const Navigation = () => {
return (
<nav>
<BetterLink href="/" activeClassName="active">
Home
</BetterLink>
<BetterLink href="/about" activeClassName="active">
About
</BetterLink>
</nav>
);
};In this example, the activeClassName prop will apply the class "active" to the link that matches the current route.
| Prop | Type | Description |
|---|---|---|
href |
string | The URL to link to. |
activeClassName |
string | Class name to apply when the link is active. |
children |
ReactNode | Content to display inside the link. |
Here’s how to use the activeClassName prop:
<BetterLink href="/contact" activeClassName="active">
Contact Us
</BetterLink>We welcome contributions to Better Link! If you want to help improve the library, follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes.
- Test your changes.
- Submit a pull request.
Please ensure your code follows the existing style and includes tests where applicable.
Better Link is licensed under the MIT License. See the LICENSE file for more information.
For the latest releases, visit the Releases section. Here, you can download and execute the latest version of Better Link.
Check the Releases section for updates and new features.
Thank you for checking out Better Link! We hope you find it useful for your Next.js projects. Happy coding!