@morr/vue-waypoint
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.8 • Public • Published

    VueWaypoint

    trigger functions and events based on the element position on the screen

    Latest Release

    Vue2 and Nuxt version

    vue-waypoint for Vue2 repository

    Demo

    Simple demo page

    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 (3+ years)

    Getting started

    npm

    npm i vue-waypoint

    Vue component

    <template>
      <Waypoint @change="onChange">
        slot content
      </Waypoint>
    </template>
    <script lang="ts">
    import { defineComponent } from "vue";
    import { VueWaypoint } 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 };
      }
    });
    </script>

    Props

    active

    • [x] Can use a reactive variable
    • [x] Can set true/false dinamically

    Usage:

    • Enable the waypoint: <Waypoint :active="true" />
    • Disable the waypoint: <Waypoint :active="false" />

    options

    Usage:

    Options example:

    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: <Waypoint :tag="'div'" /> --> renders --> <div></div>

    • Waypoint as span: <Waypoint :tag="'span'" /> --> renders --> <span></span>

    • Waypoint as p: <Waypoint :tag="'p'" /> --> renders --> <p></p>

    Events

    change

    Emitted every time the waypoint detects a change.

    <template>
      <Waypoint @change="onChange" />
    </template>
    const changeFunction = (waypointState) => {..}
    WaypointState {
      el: Element,
      going: 'IN' | 'OUT';
      direction: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
    };

    Development

    1. Fork the repository
    2. Run the project (npm i && npm run serve)
    3. Follow Conventional Commits spec for your commits
    4. Open a pull request

    Keywords

    none

    Install

    npm i @morr/vue-waypoint

    DownloadsWeekly Downloads

    14

    Version

    4.0.8

    License

    MIT

    Unpacked Size

    598 kB

    Total Files

    37

    Last publish

    Collaborators

    • morr