reusable-navbar v1.0.10
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-navbarUsage
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.