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

vbs-use

v0.1.0-beta.2

Published

<p align="center"> <h1 align="center">VBS-Use(WIP)</h1> <p align="center">VBS Vue Composition Utilities for Vue 2 and 3(WIP)</p> </p>

Downloads

9

Readme

TODO LIST

Elements:

  1. useActiveElement: Reactive document.activeElement.
  2. useDraggable: Make elements draggable.
  3. useElementBounding: Reactive bounding box of an HTML element.
  4. useElementVisibility: Tracks the visibility of an element within the viewport.
  5. useMouseInElement: Reactive mouse position related to an element.
  6. useWindowScroll: Reactive window scroll.

Browser

  1. useBreakpoints: Reactive viewport breakpoints.
  2. useBrowserLocation: Reactive browser location.
  3. useClipboard: Reactive Clipboard API.
  4. useEventListener:Use EventListener with ease. Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
  5. useFullscreen: Reactive Fullscreen API.
  6. useImage: Reactive load an image in the browser, you can wait the result to display it or show a fallback.
  7. useUrlSearchParams: Reactive URLSearchParams.

Behavior:

  1. onClickOutside: Listen for clicks outside of an element. Useful for modal or dropdown.
  2. useGeolocation: Reactive Geolocation API.
  3. useInfiniteScroll: Infinite scrolling of the element.
  4. useMouse: Reactive mouse position.
  5. useOnline: Reactive online state. A wrapper of useNetwork.
  6. useFetch: Reactive Fetch API provides the ability to abort requests, intercept requests before they are fired, automatically refetch requests when the url changes, and create your own useFetchwith predefined options.
  7. useNow: Reactive current Date instance.
  8. useIntervalFn: Wrapper for setInterval with controls.
  9. useRafFn: Call function on every requestAnimationFrame. With controls of pausing and resuming.
  10. useTimestamp: Reactive current timestamp.

Utils:

  1. useVModel: Shorthand for v-model binding, props + emit -> ref.
  2. useDateFormat: Get the formatted date according to the string of tokens passed in, inspired by dayjs.
  3. useTimeAgo: Reactive time ago.
  4. useSorted: Reactive sort array.
  5. useBase64: Reactive base64 transforming. Supports plain text, buffer, files, canvas, objects, maps, sets and images.
  6. useCounter: Basic counter with utility functions.
  7. useCycleList: Cycle through a list of items.
  8. useDebounceFn: Debounce execution of a function.
  9. useThrottleFn: Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.
  10. useToggle: A boolean switcher with utility functions.