Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scaccogatto/vue-waypoint
trigger functions and events based on the element position on the screen
https://github.com/scaccogatto/vue-waypoint
intersectionobserver triggers vue vue3
Last synced: 27 days ago
JSON representation
trigger functions and events based on the element position on the screen
- Host: GitHub
- URL: https://github.com/scaccogatto/vue-waypoint
- Owner: scaccogatto
- License: mit
- Created: 2016-12-06T09:30:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-28T15:55:42.000Z (about 1 year ago)
- Last Synced: 2024-10-05T18:28:58.000Z (about 1 month ago)
- Topics: intersectionobserver, triggers, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 1.36 MB
- Stars: 470
- Watchers: 8
- Forks: 38
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# VueWaypoint
> trigger functions and events based on the element position on the screen
## Demo
[Simple demo page](https://vue-waypoint.netlify.app/)
Open your browser console and see what's going on while scrolling up and down
## Features
- [x] Vue 3
- [x] No dependencies
- [x] Flexible
- [x] Typescript
- [x] Battle tested
- [x] Customizable
- [x] Solid project (5+ years)
- [x] Supports slots
## Getting started
### npm
```bash
npm i vue-waypoint
```
### Vue component
```html
```
```html
import { defineComponent } from "vue";
import { Waypoint } from "vue-waypoint";
export default defineComponent({
name: "SomeComponent",
components: {
Waypoint,
},
setup() {
const onChange = (waypointState) => {
// Going can be:
// IN
// OUT
console.log(waypointState.going);
// Direction can be:
// UP
// DOWN
// LEFT
// RIGHT
console.log(waypointState.direction);
};
return { onChange };
},
});
```
## Props
### `active`
- [x] Can use a reactive variable
- [x] Can set `true`/`false` dynamically
Usage:
- Enable the waypoint: ``
- Disable the waypoint: ``
### `options`
- [x] Useful for inner div detection
- [x] Trigger `change` event a portion of the element is completely on screen
- [x] Is an [official IntersectionObserverInit implementation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
Usage:
- Set a custom `IntersectionObserver` options: ``
- Read what you can do with `options`: [IntersectionObserverInit docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
Options example:
```js
const options: IntersectionObserverInit = {
root: document,
rootMargin: "0px 0px 0px 0px",
threshold: [0.25, 0.75],
};
```
### `tag`
- [x] Set your preferred tag for the element
- [x] Defaults to `div`
- Waypoint as div: ` --> renders -->
`
- Waypoint as span: ` --> renders --> `
- Waypoint as p: ` --> renders --> `
### `disableCssHelpers`
- [x] Disable automatic CSS classes on the Waypoint component
- [x] Defaults to `false`
Usage:
- Enable helpers (default): ``
- Disable helpers: ``
DOM result:
- With CSS helpers: ` --> renders -->
`
- Without CSS helpers: ` --> renders --> `
## CSS helpers
- [x] Zero configuration needed
- [x] Useful for simple CSS animations
The component comes with three classes:
- `waypoint`: set when the waypoint is ready
- `going-in`, `going-out`: dynamically changed when the waypoint comes in and out
- `direction-up`, `direction-down`, `direction-left`, `direction-right`: dynamically changed when the direction changes
Examples:
- `` - the element is visible and came from bottom and is going top (natural scroll)
- `` - the element is visible and came from top and is going up (reverse natural scroll)
- `` - the element is not visible and came from bottom and is going top
- `` - the element is not visible and came from top and is going up
## Events
### `change`
Emitted every time the waypoint detects a change.
```html
```
```js
function onChange(waypointState) {
/* ... */
}
```
```js
interface WaypointState {
el: Element;
going: "IN" | "OUT";
direction: "UP" | "DOWN" | "LEFT" | "RIGHT";
}
```
## Development
1. Fork the repository
2. Run the project (`npm i && npm run dev`)
3. Follow [Conventional Commits spec](https://www.conventionalcommits.org/en/v1.0.0/) for your commits
4. Open a pull request
## LEGACY: Vue2 and Nuxt version
[vue-waypoint for Vue2 repository](https://github.com/scaccogatto/vue-waypoint/tree/vue2)