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

active-detector

v1.2.3

Published

Detect whether browser user is still active.

Downloads

8

Readme

active-detector

Detect whether browser user is still active.

Install

yarn add active-detector

Example

Demo here. Excute yarn && yarn start and watch the log in console.

Usage

Quick Start

import { AD, USER_STATE, ActiveRange } from 'active-detector'
const ad = new AD()
ad.getState() // 'active'
ad.ActiveRange() // [start: 1572160131022, end: 1572160127925 ]
ad.on('active', () => console.log('turn to active')) // excute when user turn to be active
ad.on('inactive', () => console.log('turn to inactive')) // excute when user turn to be inactive
ad.on('tick', (state) => console.log(`tick tick, user is ${state} now.`)) // tick users's state

Options

Configuration of active-detector.

const ad = new ActiveDetector({
  inactiveThresh: 10000, // optional, time of determined as the threshold of inactive, default is 30000ms
  throttleTimeout: 500, // optional, in terms of performance, all users activations that be listened is throttled, default is 900ms
})

Add Listener

The callbacks will be invoked when user from inactive to active, or from active to inactive.

active-detector use tiny-emitter as the callback controller.

on: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void
off: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void
once: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void

type LISTENABLE_ACTION =
| 'active' // invoked when user turn to be active from inactive
| 'inactive' // invoked when user turn to be inactive from active
| 'tick' // // tick users's state every ${inactiveThresh} inverval

Get Current State

Get current user state.

getState: () => USER_STATE;

Get Active Time Ranges

Get current active time ranges. The start/end time is an Unix timestamp.

getRanges: () => ActiveRange[]; // {start: number, end: number}[]

Clear Time Ranges

Clear time ranges immediately, it might be used in case you have reported number of ranges by time.

clearRanges: () => void; // {start: number, end: number}[]