feat(use-presence): allow use-presence to be driven by arbitrary data #11

EthanStandel · 2023-01-28T20:51:55Z

The purpose of this change is to solve another challenging problem with presence animations within the already available hook which, in my opinion, makes it even more useful!

With this change, usePresence can take an argument of arbitrary type, and it will manage a staggered state of that argument. This allows the hook to function as it always did with boolean values, but if it receives another type then it will manage the render state based upon if the value is truthy or not+¹. However, if the state changes between two truthy values, then the added change will ensure that the original data continues to persist until the element has transitioned out, at which point the element will transition back in with the new data without ever unmounting.

Here is a StackBlitz example showing a simple use-case for the new version of the hook alongside the old behavior working as expected.

If you're interested in having this change, then just let me know and I'll add the new use-cases to the docs. If this is not a change you're interested in, I might just make a wrapper package around yours.
+¹ I've also considered accepting a custom function which can evaluate truthiness in case you have a data type like number and you want 0 to be truthy. If you think this is important I can also add that.

amannn · 2023-01-29T10:51:28Z

Hey, thanks a lot for sharing your idea—I think that's certainly interesting!

The use case would be to have an array of items where only one of them is visible at a time, right? E.g. a tab navigation where the content is animated.

Maybe it would make sense to implement it as a wrapper hook indeed? We could still export it from this package if you like:

import {useItemPresence} from 'use-presence';

The intention here would be to keep the size of the original usePresence hook. There are very capable animation libraries for React (like framer-motion) and I think the sweet spot of use-presence are really the simple use cases where bundle size matters, therefore I'd like to keep optimizing for that. Also keeping the isVisible: boolean argument for documentation purposes is helpful IMO.

Out of curiosity: How did you learn about the use-presence package? 🙂

EthanStandel · 2023-01-29T19:29:30Z

Hey @amannn, your assumption about the use case is exactly right! If you have an array/record/map where you want to be able to swap the data in & out arbitrarily and see the old data maintained while a component displaying it animates out and then update the data to whatever the latest is to animate a new piece of data back in.

I think there's a valid take that this would make more sense as a wrapper hook. That's how I originally implemented it in my use-case and it works well. Adding the lag-data state also forces a few more renders to fire. It's never been a problem in my use-cases, but I can see why you wouldn't want to make your users have to deal with that if they don't need it. I've updated the PR to create and export a separate hook. If you like this as it is, then just let me know and I'll write up the documentation!

And I found use-presence because it was exactly what I was looking for 🎉 I wanted AnimatePresence from framer-motion but without the weight of framer-motion. The savings from use-presence is substantial: use-presence & React bundles to a 2.89KB GZIP bundle, whereas just trying to grab AnimatePresence from framer-motion & React bundles to a 47.45KB GZIP bundle. That's a 94% size reduction for features that I never needed 😅 EDIT: This being said, it's even better than that because bundling React alone is a 2.87KB GZIP output, so if you subtract that from both the framer-motion build and the use-presence build, then they are 44.58KB & 0.02KB bundles respectively, which is actually a 99.95% cost savings on your bundle!

…the option types for the original hook change, the wrapper hook will receive the update by default

…alues from usePresence, and export both of their options types

EthanStandel · 2023-01-29T19:48:32Z

Little extra update: because the wrapper hook is using the type of the options from the base hook, I just separated out the types for each of their options argument. That way if the options type for usePresence changes in the future, the type for useUniqueDataPresence will be updated automatically.

I also exported both of these types. I did this because when I used this hook in my project, I had a transitionDuration that I used everywhere. So within my own project, I created my own wrapper hook that looked like this:

import usePresenceBase from "use-presence";

export const usePresence = (
  isVisible: boolean,
  options: Parameters<typeof usePresenceBase>[1] = { transitionDuration: 150 }
) => usePresence(isVisible, options);

But once the types are exported I can use UsePresenceOptions as opposed to Parameters<typeof usePresenceBase>[1]

EthanStandel · 2023-01-29T19:56:49Z

Updated StackBlitz with latest code!

amannn

Hey, thanks a lot for the update here! I've left some comments inline, let me know what you think!

amannn · 2023-02-02T11:43:46Z