Hiding Header React

Toggles header visibility on scroll. Try interactive CodeSandbox demo.

Installation

npm install hiding-header-react

How to use

Component

import { HidingHeader } from 'hiding-header-react'
import 'hiding-header/dist/style.css'

const Header = () => {
	return (
		<HidingHeader>
			<header
				style={{ backgroundColor: 'black', color: 'white', padding: '1em' }}
			>
				Put your content here
			</header>
		</HidingHeader>
	)
}

CSS

Import hiding-header/dist/style.css to your CSS. It's few lines of code. You can alternatively copy paste it and adjust things like z-index to your needs.

Advanced use

<HidingHeader> accepts several optional props.

| property name | default | description | | ----------------------------- | ----------------------------------- | ------------------------------------------------------------------------- | | className | 'hidingHeader' | Wrapper class attribute. | | innerClassName | 'hidingHeader-in' | Offspring class name. | | component | div | Wrapper tag name. | | heightPropertyName | '--hidingHeader-height' | CSS property name. | | boundsHeightPropertyName | '--hidingHeader-bounds-height' | CSS property name. | | animationOffsetPropertyName | '--hidingHeader-animation-offset' | CSS property name. | | snap | true | Prevents only half of the header being visible when user stops scrolling. | | onHeightChange | noop | Callback. | | onVisibleHeightChange | noop | Callback. | | onHomeChange | noop | Callback which calls back when header enters or leaves initial position. |

Example

Changes header background to opaque when sticking / not home.

const MyApp = () => {
	const [isHome, setIsHome] = useState(true)

	return (
		<HidingHeader
			onHomeChange={(isHomeNew) => {
				setIsHome(isHomeNew)
			}}
		>
			<div style={{ backgroundColor: isHome ? 'transparent' : 'white' }}>
				Menu
			</div>
		</HidingHeader>
	)
}

For runtime manipulation you can use hooks.

| hook name | description | | ----------------------- | ---------------------------------------------------------------------------- | | useHidingHeader | Returns object with multiple functions to obtain or manipulate header state. | | usePauseHidingHeader | Returns function. When called won't react to scroll. | | useRunHidingHeader | Returns function. When called will react to scroll again. | | useRevealHidingHeader | Returns function. When called will force header to show. | | useHideHidingHeader | Returns function. When called will force header to hide. |