@yoursaptarshi/header

#React Header Component Hey! This is Saptarshi. Thank You for Downloading @yoursaptarshi/header This is a reusable React component for creating a customizable header and navigation bar.

Features

• Customizable header background color, height, and image.
• Adjustable logo width.
• Configurable heading text and color.
• Flexible navigation bar with customizable menu items.
• Options to set navbar background color, height, menu colors, and more.

Usage

1. Install Dependencies

   Make sure you have React installed in your project. If not, you can install it using:

  npm install react

2. Install the Component

  npm install @yoursaptarshi/header   

3. Import and Use the Component

 import React from 'react';
 import Header from '@yoursaptarshi/header';

 // Your React component


 const App = () => {

   const headerConfig = {
     image: '<path-to-your-image>',
     heading: 'Your App Name',
     menus: [
       { name: 'Home', link: '/' },
       { name: 'About', link: '/about' },
       // Add more menu items as needed
     ],


     // Customize other header and navbar properties as needed
   };

   return (
     <div>

       <Header {...headerConfig} />

       {/* Your other components or content */}

     </div>
   );
 };

 export default App;

Props

• image: Path to the header image (logo).

• heading: Text for the header text (heading).

• menus: Array of menu items with name and link properties.

• headerHeight: Height of the header (default: '9vh').

• headerColor: Background color of the header (default: 'white').

• headingColor: Color of the heading text (default: 'black').

• logoWidth: Width of the logo (default: '7vh').

• navbarColor: Background color of the navbar (default: '#d4ebff').

• navbarHeight: Height of the navbar (default: '6vh').

• menuColor: Background color of each menu item (default: 'white').

• menuHeight: Height of each menu item (default: '5vh').

• menuBorderRadius: Border radius of each menu item (default: '0px').

• menuTextColor: Color of the menu text (default: 'black').