https://github.com/felipe1234-dev/use-on-screen
A React Hooks npm package to check if element is on screen viewport or not.
https://github.com/felipe1234-dev/use-on-screen
Last synced: 5 months ago
JSON representation
A React Hooks npm package to check if element is on screen viewport or not.
- Host: GitHub
- URL: https://github.com/felipe1234-dev/use-on-screen
- Owner: felipe1234-dev
- Created: 2021-10-01T21:59:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-15T20:10:09.000Z (over 4 years ago)
- Last Synced: 2025-10-19T12:40:13.925Z (9 months ago)
- Language: JavaScript
- Size: 193 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Use On Screen
**use-on-screen** is a React Hooks library used to detect if a certain element is visible on the screen, both in a scrollable container and in the window.
## Installation ⚙️
Use the package manager [npm](https://www.npmjs.com/) to install **use-on-screen**.
```bash
npm install use-on-screen
```
## Usage 🛠️
```javascript
// ...
import useOnScreen from "use-on-screen";
function FakeFeed() {
const [visible, position] = useOnScreen({
target: "#loader", // default: ""
parent: "#feed",
// if the parent is not defined,
// it will consider the entire user's viewport
delay: 500 // default: 1000
});
// ...
// Use useEffect() to call a function when element is visible
useEffect(() => {
if (visible) {
loadMorePosts();
console.log(position);
}
}, [visible]);
// ...
return (
{/*
Many other posts over here...
*/}
{/* if visible, it will
load more posts*/}
);
}
```
## Contributing 💭
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License 📝
[MIT](https://choosealicense.com/licenses/mit/)