Thread by @JoshWComeau

🔥 In my projects, I use a handful of “hidden gem” NPM packages. These club-ready bangers have really helped me out, but aren't super well-known. I thought it'd be fun to share some of them. 😄

Here are 5 of the secret weapons in my armory ⚔️

🧵

1. Windups, by @sgwil
npmjs.com/package/windups

A React package that provides components/hooks for creating "self-typing" bits of text, with all kinds of whimsical bells and whistles.

I use it in a couple places on my blog 😄

2. chroma-js by @driven_by_data
npmjs.com/package/chroma…

There are lots of packages for converting between color formats, but none are as comprehensive and well-thought-out as this one. Been using it in [REDACTED] and it's delightful.

Amazing interactive docs too!

3. artsy/fresnel, by Artsy
npmjs.com/package/@artsy…

This is a tool for responsive conditional rendering in React.

Unlike other packages like react-media, it's SSR-safe, so it works with Next/Remix/Gatsby. Super clever implementation, incredible DX + UX.

(I need to write a blog post that explains why artsy/fresnel is so good.

The short version: in other packages, every user (mobile AND desktop) will see the same initial thing for a brief instant, until the JS kicks in and the UI redraws. Fresnel fixes this problem.

4. Immer, by @mweststrate
npmjs.com/package/immer

We've all heard that immutability is good, but it can be *really* annoying to work with immutable objects/arrays.

Immer lets you use the often-much-simpler mutable operations, while secretly being immutable behind-the-scenes.

For example, let's say we want to take an array, and update one of the middle values. Check out the difference.

Both versions are immutable (`arr` is not changed).

It's pure magic, made possible by ES6 Proxies (though a fallback implementation is provided, making it IE-safe)

Raw code from screenshot: pastebin.com/y6eFx6tP

5. Radix Primitives
radix-ui.com/docs/primitive…

This is a *phenomenal* set of accessibility-focused UI primitives. All of the really-hard-to-get-right stuff like dialogs, accordions, menus, scroll containers. Bring your own styles.

The team is wonderful, too!

The GIF shows styled and lovely components, but the library is really focused on the functionality, making sure that everything works well across platforms and for all users.

It's also a collection of individual modular NPM packages. Pick the components you need in your project.

There are lots of accessibility-focused "primitives" component libraries, and I love it.

Here are some others I've used / heard good things about:

reach.tech
react-spectrum.adobe.com/react-aria/
headlessui.dev

These packages have helped me to be more productive, and made for a better developer + user experience. With the exception of artsy/fresnel (which I discovered recently), I've used all 5 packages in real-world projects. They're all 🔥🔥🔥🔥.

Hope they help you too!

(Also, I know not all of these are actually that obscure; Immer is apparently *super* popular if the NPM numbers are to be believed! But I haven't seen much discussion of these packages on Twitter. Hopefully they're new to you!)