@swapneshio/stickyheader

A simple and reusable React component that renders its children within a sticky header with predefined CSS and JavaScript.

Installation

You can install the package using npm, yarn, or pnpm:

npm install @swapneshio/stickyheader

yarn add @swapneshio/stickyheader

pnpm add @swapneshio/stickyheader

CDN Usage

You can include the @swapneshio/stickyheader package directly from jsDelivr using the following link:

https://cdn.jsdelivr.net/npm/@swapneshio/stickyheader@latest/dist/index.js

OR

<script src="https://cdn.jsdelivr.net/npm/@swapneshio/stickyheader@latest/dist/index.js"></script>

Usage

Wrap your header or navigation component within the StickyHeader component to make it sticky.

import React from 'react';
import StickyHeader from '@swapneshio/stickyheader';
import HeaderComponent from './HeaderComponent'; // Import your header component

const App = () => {
  const styles = {
    // Your custom styles here
  };

  return (
    <StickyHeader>
      <HeaderComponent style={styles} className="classnames">
        {/* Your header content */}
      </HeaderComponent>
    </StickyHeader>
  );
};

export default App;

License

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