Hiding Header React  !npm type definitions

Toggles header visibility on scroll. Try interactive CodeSandbox demo.

!UI example

Installation

``bash
npm install hiding-header-react
`

How to use

$3

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

const Header = () => {
return (

style={{ backgroundColor: 'black', color: 'white', padding: '1em' }}
>
Put your content here


)
}
`

$3

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.

$3

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 (
onHomeChange={(isHomeNew) => {
setIsHome(isHomeNew)
}}
>




)
}
`

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