A set of small utilities for react that I needed at least twice in the past

Usage no npm install needed!

<script type="module">
  import lbfalvyReactUtils from 'https://cdn.skypack.dev/@lbfalvy/react-utils';


React utils

A set of small utilities for react that I needed at least twice in the past


This is an ominous function, it appears in one form or another in nearly every React project because conditionally applying classes is incredibly common. This variant can be called with logical expressions and returns a well-formatted class list composed of those entries that evaluated to a string or string array.


React's dependency arrays have a fixed length, which creates a huge problem in the perfectly normal case when you need to react to changes in an array of changing length. useArray simply takes a variable length array and returns its memo'd version. I explain how this can be used to unambiguously represent nested arrays or other datastructures in this issue at React


This hook takes an array of URLs and loads the scripts under those URLs into the document. The scripts are removed on component unload, but otherwise never touched on reloads as long as they're present in both the previous and current version of the array. Returns a promise that resolves when everything is loaded.


useImperativeHandle, except it returns a function that you can call when you like, allowing you full control over the ref value.


Takes multiple refs, returns a single old-style ref function. Calling this function updates all refs.


Turns an input into an uncontrolled component that updates a particular entry on an object. Can be used with input events if the dom flag is set, but it uses plain value onChange callbacks by default which is more common among custom input components.


takes an optional handler that will be called on every mousemove. Returns a function that can be used to get the last mouse position. The latter uses a single global handler which is removed when the last hook is unloaded.


Returns a tuple containing the current window dimensions. Since this is unlikely to change a lot, it's easier this way than with the complicated approach taken by usePointer


Everything has automatic tests except [usePointer] and [useWindowDimensions] because I couldn't figure out how to test them. Help in this regard is appreciated.