A react component library to hide/show elements based on scroll
npm install react-hide-on-scroll- To install from npm, run-
``
npm install --save react-hide-on-scroll
- To install locally, clone this repo and in root directory, run-
`
npm run setup
- Pass the element to be hidden as children to the components.
`js`
hidden from div 1 to 3
`js`
Hidden from third div
`js`
Hidden on scrolling down
`js``
Hidden while scrolling
HideBetween
To hide/show an element between 2 divs or between 2 specified heights(px)
| Props | Description | Type | isOptional |
| :------------: | --------------------------------------------------------------------------------- | --------- | ---------- |
| children | The required react element that needs to be hidden | ReactNode | false |
| div | To hide between 2 specified divs | boolean | true |
| height | To hide between 2 specified heights | boolean | true |
| inverse | Specifying this will show the element instead of hiding, in specified breakpoints | boolean | true |
| startDivID | ID of the div to start hiding from | string | true |
| endDivID | ID of the div to stop hiding at | string | true |
| startDivOffset | To set an offset on the start position(in pixels) -- usable only with div prop | number | true |
| endDivOffset | To set an offset on the end position(in pixels) -- usable only with div prop | number | true |
| startHeight | Height from where hiding must begin (in pixels) | number | true |
| endHeight | Height where hiding must end (in pixels) | number | true |
HideOn
To hide/show an element when reached a div or a specified height(px)
| Props | Description | Type | isOptional |
| :------------: | --------------------------------------------------------------------------------- | --------- | ---------- |
| children | The required react element that needs to be hidden | ReactNode | false |
| atDiv | To start hiding at a div | boolean | true |
| atHeight | To start hiding at a height | boolean | true |
| inverse | Specifying this will show the element instead of hiding, in specified breakpoints | boolean | true |
| divID | ID of the div to start hiding from | string | true |
| offset | To set an offset on the hiding position(in pixels) -- usable only with div prop | number | true |
| height | Height from where hiding must begin (in pixels) | number | true |
| showOnPageInit | To specify whether the element must be visible when the component first loads | boolean | true |
HideDuring
To hide/show an element during a scroll. (scroll to make element hidden/shown)
| Props | Description | Type | isOptional |
| :------: | ----------------------------------------------------- | --------- | ---------- |
| children | The required react element that needs to be hidden | ReactNode | false |
| inverse | Shows an element while scrolling instead of hiding it | Boolean | true |
Hide
To hide an element on scrolling up or down.
| Props | Description | Type | isOptional |
| :------------: | --------------------------------------------------------------------------------------- | -------------- | ---------- |
| children | The required react element that needs to be hidden | ReactNode | false |
| variant | To specify whether the element must be hidden on scrolling up or down (down by default) | "up" or "down" | true |
| showOnPageInit | To specify whether the element must be visible when the component first loads | boolean | true |
- Typescript
- React
- create-react-library