React-activenav-button NPM

react-activenav-button

react-activenav-button is a custom React hook that provides a simple way to manage and update the active link/button state in a navigation component.

Installation

You can install the package using npm:

npm install react-activenav-button

or with yarn:

yarn add react-activenav-button

Usage

To use react-activenav-button, follow these steps:

-Import the hook into your React component:

import ActiveNavButton from "react-activenav-button";

-Initialize the hook by passing the initial active link/button value:

const { activeLink, handleButtonClick } = ActiveNavButton("home");

The activeLink variable holds the current active link/button value, and handleButtonClick is a function that you can attach to your link/button components to update the active state.

-Attach the handleButtonClick function to your link/button components:

<button onClick={handleButtonClick('home')}>Home</button>
<button onClick={handleButtonClick('about')}>About</button>
<button onClick={handleButtonClick('services')}>Services</button>

In this example, the active state will be updated based on the link/button that is clicked.

-You can access the activeLink value to apply different styles or perform additional logic based on the active link/button:

<button className={activeLink === 'home' ? 'active' : ''}>Home</button>
<button className={activeLink === 'about' ? 'active' : ''}>About</button>
<button className={activeLink === 'services' ? 'active' : ''}>Services</button>

By comparing the activeLink value with each link/button, you can conditionally apply the active class or any other styling as needed.

Example

Here's a simple example demonstrating the usage of react-activenav-button:

import React from "react";
import ActiveNavButton from "react-activenav-button";

function Navigation() {
  const { activeLink, handleButtonClick } = ActiveNavButton("home");

  return (
    <nav>
      <button
        onClick={handleButtonClick("home")}
        className={activeLink === "home" ? "active" : ""}
      >
        Home
      </button>
      <button
        onClick={handleButtonClick("about")}
        className={activeLink === "about" ? "active" : ""}
      >
        About
      </button>
      <button
        onClick={handleButtonClick("services")}
        className={activeLink === "services" ? "active" : ""}
      >
        Services
      </button>
    </nav>
  );
}

export default Navigation;

In this example, the active link state is managed using the ActiveNavButton hook, and the active link/button is visually indicated by applying the active class.