reusable-navbar

v1.0.10

Published

10 months ago

A highly customizable and reusable navbar component for React applications. This component includes a modal for booking appointments and displays token information.

0High
0Medium
0Low

ayush-elixirtechne

navbar reusable-navbar

ReusableNavbar Component

A highly customizable and reusable navbar component for React applications. This component includes a modal for booking appointments and displays token information.

Installation

To install the ReusableNavbar component, run the following command:

npm install reusable-navbar

Usage

To use the ReusableNavbar component in your React application, follow these steps:

1. Add Tailwind CSS via CDN

Include the following script tag in the <head> of your index.html file to load Tailwind CSS:

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReusableNavbar Example</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. Import the Component

import React from "react";
import ReusableNavbar from "reusable-navbar";

3. Use the Component

const App = () => {
  return (
    <div>
      <ReusableNavbar totalTokens={20} currentTokens={5} buttonName="Book Now" />
    </div>
  );
};

export default App;

Props

The ReusableNavbar component accepts the following props:

| Prop Name | Type | Default Value | Description | |---------------------------|--------|---------------|--------------------------------------------------| | totalTokens | number | 0 | Total number of tokens available. | | currentTokens | number | 0 | Current token number being served. | | buttonName | string | "Book" | Text to display on the main button. | | containerClassName | string | "" | Custom class name for the main container. | | tokenTextClassName | string | "" | Custom class name for the token text elements. | | buttonClassName | string | "" | Custom class name for the main button. | | modalOverlayClassName | string | "" | Custom class name for the modal overlay. | | modalContentClassName | string | "" | Custom class name for the modal content. | | modalTitleClassName | string | "" | Custom class name for the modal title. | | labelClassName | string | "" | Custom class name for the form labels. | | inputClassName | string | "" | Custom class name for the input fields. | | cancelButtonClassName | string | "" | Custom class name for the "Cancel" button. | | confirmButtonClassName | string | "" | Custom class name for the "Book" button. | | successMessageClassName | string | "" | Custom class name for the success message. | | closeButtonClassName | string | "" | Custom class name for the "Close" button. |

Customization

You can customize the appearance of the ReusableNavbar component by passing custom class names to the respective props. For example:

<ReusableNavbar
  totalTokens={20}
  currentTokens={5}
  buttonName="Reserve"
  containerClassName="custom-navbar"
  buttonClassName="custom-button"
  modalOverlayClassName="custom-overlay"
  modalContentClassName="custom-modal"
  labelClassName="custom-label"
  inputClassName="custom-input"
  cancelButtonClassName="custom-cancel-button"
  confirmButtonClassName="custom-confirm-button"
  successMessageClassName="custom-success-message"
  closeButtonClassName="custom-close-button"
/>

Example

Here’s an example of a fully customized ReusableNavbar:

import React from "react";
import ReusableNavbar from "reusable-navbar";

const App = () => {
  return (
    <div>
      <ReusableNavbar
        totalTokens={20}
        currentTokens={5}
        buttonName="Reserve"
        containerClassName="bg-blue-100 p-4"
        buttonClassName="bg-blue-500 text-white hover:bg-blue-700"
        modalOverlayClassName="bg-gray-200/60"
        modalContentClassName="bg-white p-6 rounded-lg"
        modalTitleClassName="text-blue-600 font-bold"
        labelClassName="text-gray-700"
        inputClassName="border border-gray-300 rounded p-2"
        cancelButtonClassName="bg-gray-300 hover:bg-gray-400"
        confirmButtonClassName="bg-green-500 hover:bg-green-700 text-white"
        successMessageClassName="text-green-600"
        closeButtonClassName="bg-blue-500 hover:bg-blue-700 text-white"
      />
    </div>
  );
};

export default App;

This documentation provides clear installation steps, usage examples, a well-structured props table, and customization options to ensure easy integration of the ReusableNavbar component in any React project.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme