https://github.com/mciccale/use-visibility-on-scroll-up
Toggle the visibility on scroll of elements in your React app easily.
https://github.com/mciccale/use-visibility-on-scroll-up
hooks react visibility
Last synced: 6 months ago
JSON representation
Toggle the visibility on scroll of elements in your React app easily.
- Host: GitHub
- URL: https://github.com/mciccale/use-visibility-on-scroll-up
- Owner: mciccale
- Created: 2023-12-05T11:05:20.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-05T11:10:55.000Z (almost 2 years ago)
- Last Synced: 2023-12-05T12:27:27.243Z (almost 2 years ago)
- Topics: hooks, react, visibility
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/use-visibility-on-scroll-up
- Size: 62.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-visibility-on-scroll-up
Toggle the visibility on scroll of elements in your **React** app easily.
When scrolling down, hide the element. When scrolling up, show the element.
## Features
- This **hook** provides an easy way to consult whether an element should be **visible** when **scrolling up and down**.
- You can also access the lastScroll of the user.
- **Next.js** ready out of the box.
## Installation
```shell
npm install use-visibility-on-scroll-up
# or
pnpm add use-visibility-on-scroll-up
# or
yarn add use-visibility-on-scroll-up
```
## Usage
The hook can be imported as follows:
```jsx
/*
* Navbar.jsx
*/
import { useVisibilityOnScrollUp } from 'use-visibility-on-scroll-up';
// ...
const { visible, lastScroll } = useVisibilityOnScrollUp();
```
## Example
**Navbar Example using TailwindCSS**
```jsx
import { useVisibilityOnScrollUp } from 'use-visibility-on-scroll-up';
export default function Navbar() {
const { visible, lastScroll } = useVisibilityOnScrollUp();
// Show element if it's visible or the lastScroll was 0 (top of the page)
return (
);
}
```