npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sonar-js

v1.1.0

Published

A tiny library for detecting when a browser is scrolled to the bottom of a web page.

Downloads

183

Readme

Sonar.js

A tiny library for detecting when a browser is scrolled to the bottom of a web page.

You could use this, for example, on a blog to show a popover when a reader has finished a post, letting them know they can receive new posts by email if they submit their email address.

Installation

yarn add sonar-js

The package comes in three formats: CommonJS, Universal Module Definition, and ECMAScript Module.

| Format | package.json key | Path | |--------|------------------|-------------------| | CJS | main | dist/sonar.js | | UMD | umd:main | dist/sonar.umd.js | | ESM | module | dist/sonar.m.js |

The package is built on-the-fly before publishing to NPM so the dist folder is not in the repo. If you’d like the built files install it via yarn or npm and pluck the file you need out of node_modules/sonar-js/dist/.

Usage

Create an instance of Sonar passing in the window and then call ping passing in the range to the bottom of the page, a function to call when within range of the bottom and an optional function to call when not within range of the bottom.

When ping is called one of the callbacks will fire, depending on whether or not the scroll is currently within range of the page bottom. The behavior after that depends on which callbacks are provided.

One callback

var sonar = new Sonar(window)

var withinRangeOfPageBottom = function() {
  document.querySelector('.popover').classList.remove('hidden')
}

sonar.ping(600, withinRangeOfPageBottom)

Without a second callback to fire when losing the bottom of the page this is essentially a one-time use. The callback will fire once when finding the bottom of the page and then never fire again, even if you scroll up and back down again.

This is useful for making a permanent change when someone scrolls to the bottom of the page.

Two callbacks

var sonar = new Sonar(window)

var withinRangeOfPageBottom = function() {
  document.querySelector('.popover').classList.remove('hidden')
}

var notWithinRangeOfPageBottom = function() {
  document.querySelector('.popover').classList.add('hidden')
}

sonar.ping(600, withinRangeOfPageBottom, notWithinRangeOfPageBottom)

With a second callback to fire when losing the bottom of the page this becomes a toggle. The callbacks will only fire once when finding the bottom or losing the bottom. That is, the callbacks will only fire or re-fire when the state changes.

This is useful for making a temporary change when someone scrolls to the bottom of the page and then reversing it when they scroll away from the bottom of the page.

Tests

yarn test

Credit

The icon is Depth Sounder by Toni Bordoy.

Contributing

  1. Fork it ( https://github.com/brandonweiss/sonar-js/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am "Add some feature")
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request