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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@messman/react-common

v3.3.0

Published

Common React utilities for use in projects.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

messmanmessman

Keywords

reacttypescriptutilitylayoutpromise

Readme

react-common

Not stable. Not recommended for use by anyone other than the creator. I will likely not respond to feature requests.

npm install --save @messman/react-common

View on npm or on GitHub.

Common tools for React that I've found myself copy-pasting to different projects, tweaking each time. Better to keep it all in one spot with centralized tracking and testing. Also gives me more practice in writing my own hooks and publishing my own packages.

Focus

Keep things as generic as possible. Don't rely on any other libraries beyond React and styled-components.

Includes

  • Debug tools to track changing props and count renders and log that information
  • Small functions for time conversion, copy-to-clipboard, and a globally-unique number
  • Helper hooks, like useLatestForEffect/useLatestForLayoutEffect to always make the latest value of a dependency available for an effect
  • Two strategies for providing an effect-like experience for when a DOM element is set/unset (useRefLayoutEffect and useRefEffectCallback)
  • Namespacing, versioning, and migrations for LocalStorage access hooks
  • Timers that run correctly even when the web app or tab is minimized or hidden
  • Commonly-used UI like flex components
  • Breakpoint-based window layout responders
  • Element resize hooks based on ResizeObserver
  • Element scroll hooks based on ResizeObserver
  • Hooks for running promises, which can optionally be added in with the timers mentioned above

Future Work

Ideas:

Note on Hooks

This library tries to export hooks, and those hooks try to be written using best-practices... however, sometimes I forego the recommended style in order to get something working easily. Copying these hooks is at your own peril.

Good resources on learning about the 'proper' way to use useEffect and useRef (from what I've learned, useEffect should be used as a callback mechanism as sparingly as possible):