@mayank1513/sticky-section-header
v0.0.10
Published
[![npm version](https://badge.fury.io/js/@mayank1513%2Fsticky-section-header.svg)](https://badge.fury.io/js/@mayank1513%2Fsticky-section-header)
Downloads
80
Maintainers
Readme
Sticky Section Header
|| |:--:| | Source: React+Next.js with TypeScript|
This package exports 2 components. StickySectionHeader
is a light weight simmple to use component. Just wrap your headers/section headers inside StickySectionHeader
component and provide top (top position - margin from top of viewport) and viewPort (The container element, by default the browser viewport).
CollapsibleStickySectionHeader
adds on to the capabilities of StickySectionHeader
. (See below...)
Updates:
StickySectionHeader
andCollapsibleStickySectionHeader
components now set an attributestuck
when header is stuck.
Installation
Install StickySectionHeader from npm registry using one of the following
yarn add @mayank1513/sticky-section-header
npm i @mayank1513/sticky-section-header
pnpm i @mayank1513/sticky-section-header
Simple usage
import { StickySectionHeader } from "@mayank1513/sticky-section-header";
export default function YourComponent() {
return (
<div>
<StickySectionHeader>
<h1>My Awesome Header</h1>
</StickySectionHeader>
</div>
);
}
Use with custom top position
import { StickySectionHeader } from "@mayank1513/sticky-section-header";
export default function YourComponent() {
return (
<div>
<StickySectionHeader top=50>
<h1>My Awesome Header</h1>
</StickySectionHeader>
</div>
);
}
Use with custom top position and viewport
import { StickySectionHeader } from "@mayank1513/sticky-section-header";
import { useRef } from "react";
export default function YourComponent() {
const ref = useRef();
return (
<div>
// your other stuff
<div className="container-section" ref={ref}>
<StickySectionHeader top=50 viewPort={ref.current}>
<h1>My Awesome Header</h1>
</StickySectionHeader>
</div>
</div>
);
}
Use as waypoint
If you want to call any function when this element touches top or bottom of the viewport, you can pass in a callBack
function. This funciton gets the IntersectionObserver entry as argument.
If you want to use this component only as a waypoint and not stick it, you can pass stick={false}.
CollapsibleStickySectionHeader
import { CollapsibleStickySectionHeader } from "@mayank1513/sticky-section-header";
export default function YourComponent() {
return (
<div>
<CollapsibleStickySectionHeader maxHeight={150} minHeight={50}>
<YourHeaderComponent>My Awesome Header</YourHeaderComponent>
</CollapsibleStickySectionHeader>
</div>
);
}
You can also optionally pass onHeightChange function if you need to change something based on the height of the header ro the fraction expanded. It provides 2 inputs: fraction (between 0 and 1. 0 = collapsed, 1 = expanded) and height of the header.
Make sure to set height: 100%
for the coponent directly inside the CollapsibleStickySectionHeader