📦 A collection of pastable code gathered from past projects


Code coverageastahmer_dev Twitter


⏩ pastable: TL;DR

npm i @pastable/utils @pastable/react

(or just npm i @pastable/core which is almost the same)

📦 Package list

  • 🧰 core: Re-exports all pastable packages.
  • ⚛️ react: Re-exports all pastable react related packages.
  • 📜 typings: A bunch of utility types.
  • ⚙️ utils: A collection of very short utils functions for about anything, without dependencies. Something like a (very) tiny (incomplete) nicely typed lodash. Contains utils for : array, asserts, getters, misc, nested, object, pick, primitives, random, set

⚛️ React package contains

  • atomWithToggle: Jotai specific. Like if useToggle & useAtom & useLocalStorage had a child.
  • useClickAway: Detect and invoke a callback when clicking away of target element.
  • useEvent: Define an event listener on window or a given element declaratively
  • useForceUpdate: One liner to force a re-render when needed
  • useIsMounted: Keep track of a component mounted using ref/state.
  • useQueryParams: Allows you to get/set page history with query params, usable like a useState.
  • useSelection: Like if useState had a child with Array. Makes it easy to work with an array of objects with all the actions available.
  • useUpdateEffect: React effect hook that invokes only on update. (taken from chakra-ui)
  • usePreloadImages: Preload images urls so they can appear instantly when needed

⚡ Motivations

In every project I've been a part of, I've always ended up copy/pasting some part of a previous project that I had made generic, and moving from one project to another I just kept pasting it over and over.

So here we are, I made yet another multi-purpose-utils package !

🎨 Code style

It aims to be as generic as possible so that either the source can litteraly be pasted if you just need a couple of functions or you can install any specific package at some point.

100% written in Typescript, near 100% code coverage as a constant goal.

Feel free to contribute if you think there is space for one of your previous projects gems.

❤️ Built with

Packages are built with https://github.com/developit/microbundle & tested with https://github.com/lukeed/uvu, special thanks to their authors for those priceless gems !