#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
-
Install Dependencies
Make sure you have React installed in your project. If not, you can install it using:
npm install react
- Install the Component
npm install @yoursaptarshi/header
- 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;
-
image: Path to the header image (logo).
-
heading: Text for the header text (heading).
-
menus: Array of menu items with
name
andlink
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').