https://github.com/pradeep-selva/react-hide-on-scroll
A react component library to hide/show elements based on scroll
https://github.com/pradeep-selva/react-hide-on-scroll
hide npm-package react scroll typescript
Last synced: 12 months ago
JSON representation
A react component library to hide/show elements based on scroll
- Host: GitHub
- URL: https://github.com/pradeep-selva/react-hide-on-scroll
- Owner: Pradeep-selva
- License: mit
- Created: 2020-09-19T17:43:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-27T07:18:49.000Z (almost 5 years ago)
- Last Synced: 2024-08-09T05:50:17.955Z (almost 2 years ago)
- Topics: hide, npm-package, react, scroll, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hide-on-scroll
- Size: 1.71 MB
- Stars: 20
- Watchers: 6
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-hide-on-scroll
## Installation
- 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
```
## Usage
- 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
```
## API
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 |
## Built using
- Typescript
- React
- create-react-library
## License
[MIT](LICENSE) © [Pradeep-selva](https://github.com/Pradeep-selva)