mussaddiq-header v1.0.1

mussaddiq-header

A responsive and customizable header component built for React applications. This package provides a clean, simple, and highly customizable header with navigation links, a logo, and a mobile-friendly hamburger menu.

Features

• Responsive Design: Automatically adapts to different screen sizes.
• Customizable Logo: Easily change the logo image by providing your own.
• Navigation Links: Provides easy-to-use navigation links with customizable text.
• Mobile-Friendly: Includes a hamburger menu for smaller screens.
• Accessibility Support: Uses semantic HTML for improved accessibility.
• Simple to Use: Integrates easily into any React project with minimal setup.

Installation

To use this header component in your project, you need to install it via npm or yarn.

Using npm

npm install mussaddiq-header

Using yarn

yarn add mussaddiq-header

Usage

Once installed, you can import the Header component into your project.

Example:

import React from 'react';
import Header from 'mussaddiq-header';

function App() {
  return (
    <div>
      <Header />
      {/* Your other content goes here */}
    </div>
  );
}

export default App;

Customizing the Logo

To customize the logo, place your logo image in your project and pass it as a prop to the Header component:

import React from 'react';
import Header from 'mussaddiq-header';
import customLogo from './path-to-your-logo.png';

function App() {
  return (
    <div>
      <Header logo={customLogo} />
      {/* Your other content goes here */}
    </div>
  );
}

export default App;

Mobile Menu Toggle

The header component includes a hamburger menu that toggles open and closed on smaller screens. No additional setup is required—just use the component as shown and it will handle the mobile experience automatically.

Props

You can customize the component by passing the following props:

• logo: (optional) Path to the logo image (supports string).
• navLinks: (optional) An array of objects for customizing the navigation links. Each object should have the structure { label: "Link Text", url: "/path" }.

Example with Custom Navigation Links:

import React from 'react';
import Header from 'mussaddiq-header';

const navLinks = [
  { label: 'Home', url: '/' },
  { label: 'About', url: '/about' },
  { label: 'Services', url: '/services' },
  { label: 'Contact', url: '/contact' }
];

function App() {
  return (
    <div>
      <Header navLinks={navLinks} />
      {/* Your other content goes here */}
    </div>
  );
}

export default App;

Dependencies

This package has the following peer dependencies:

• React: >=16.8.0
• React-DOM: >=16.8.0

Development

Running the Development Environment

If you want to contribute or run the package locally, you can set up the development environment using:

1. Clone this repository:

   git clone git@github.com:mussaddiqmahmood7/header.git

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

Running Tests

To ensure that everything is working as expected, you can run tests with:

npm run test

Building the Package

To build the package for production, use:

npm run build

This will bundle the package into a dist/ folder, ready to be published or used locally.

Contributing

Feel free to open issues and pull requests. Contributions are welcome!

Steps to Contribute

1. Fork this repository.
2. Create a branch (git checkout -b my-feature).
3. Make changes and commit them (git commit -am 'Add new feature').
4. Push to your branch (git push origin my-feature).
5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Inspired by modern web design patterns and best practices for responsive web components.