https://github.com/filipchalupa/hiding-header-react

Toggles header visibility on scroll.
https://github.com/filipchalupa/hiding-header-react

header package react

Last synced: about 15 hours ago
JSON representation

Toggles header visibility on scroll.

• Host: GitHub
• URL: https://github.com/filipchalupa/hiding-header-react
• Owner: FilipChalupa
• Created: 2020-11-05T19:26:40.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-16T11:59:50.000Z (6 months ago)
• Last Synced: 2024-09-18T09:33:14.848Z (about 2 months ago)
• Topics: header, package, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/hiding-header-react
• Size: 55.7 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hiding Header React [![npm](https://img.shields.io/npm/v/hiding-header-react.svg)](https://www.npmjs.com/package/hiding-header-react) ![npm type definitions](https://img.shields.io/npm/types/hiding-header-react.svg)

Toggles header visibility on scroll. Try interactive [CodeSandbox demo](https://codesandbox.io/s/react-hiding-header-xk8rlb?file=/src/App.js).

![UI example](https://raw.githubusercontent.com/FilipChalupa/hiding-header/HEAD/screencast.gif)

## Installation

```bash

npm install hiding-header-react

```

## How to use

### Component

```jsx

import { HidingHeader } from 'hiding-header-react'

import 'hiding-header/dist/style.css'

const Header = () => {

	return (

		

			

				Put your content here

			

		

	)

}

```

### 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

`` 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.

```jsx

const MyApp = () => {

	const [isHome, setIsHome] = useState(true)

	return (

		 {

				setIsHome(isHomeNew)

			}}

		>

			


				Menu

			

		

	)

}

```


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.                     |