You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vue-waypoint

Package Overview
Dependencies
23
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-waypoint

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


Version published
Maintainers
1
Created

Changelog

Source

4.3.0 (2023-08-28)

Features

  • added support for SSR environments (#77) (1ae537b)

Readme

Source

VueWaypoint

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

Latest Release

Demo

Simple demo page

Open your browser console and see what's going on while scrolling up and down

Features

  • Vue 3
  • No dependencies
  • Flexible
  • Typescript
  • Battle tested
  • Customizable
  • Solid project (5+ years)
  • Supports slots

Getting started

npm

npm i vue-waypoint

Vue component

<template>
  <Waypoint @change="onChange">
    <!-- anything you want here -->
  </Waypoint>
</template>
<script lang="ts">
  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 };
    },
  });
</script>

Props

active

  • Can use a reactive variable
  • Can set true/false dynamically

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

  • Set your preferred tag for the element

  • Defaults to div

  • Waypoint as div: <Waypoint :tag="'div'" /> --> renders --> <div class="waypoint"></div>

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

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

disableCssHelpers

  • Disable automatic CSS classes on the Waypoint component
  • Defaults to false

Usage:

  • Enable helpers (default): <Waypoint :disableCssHelpers="false" />
  • Disable helpers: <Waypoint :disableCssHelpers="true" />

DOM result:

  • With CSS helpers: <Waypoint /> --> renders --> <div class="waypoint going-in direction-down"></div>
  • Without CSS helpers: <Waypoint :disableCssHelpers="true" /> --> renders --> <div></div>

CSS helpers

  • Zero configuration needed
  • 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:

  • <Waypoint class="waypoint going-in direction-up" /> - the element is visible and came from bottom and is going top (natural scroll)
  • <Waypoint class="waypoint going-in direction-down" /> - the element is visible and came from top and is going up (reverse natural scroll)
  • <Waypoint class="waypoint going-out direction-up" /> - the element is not visible and came from bottom and is going top
  • <Waypoint class="waypoint going-out direction-down" /> - the element is not visible and came from top and is going up

Events

change

Emitted every time the waypoint detects a change.

<template>
  <Waypoint @change="onChange" />
</template>
function onChange(waypointState) {
  /* ... */
}
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 for your commits
  4. Open a pull request

LEGACY: Vue2 and Nuxt version

vue-waypoint for Vue2 repository

FAQs

Package last updated on 28 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc