Ability to call show/hide as well as togglePresence

[bravokiloecho]

It would be useful to be able to call a function that would trigger the exit animation (eg, animatedDiv.hidePresence()) or the appear animation (eg, animatedDiv.showPresence()) as well as the animatedDiv.togglePresence()

Really nice library otherwise!

[jlkiri]

Are there any use cases where it's too hard to just use togglePresence ?

Really nice library otherwise!

Thanks!

[bravokiloecho]

Are there any use cases where it's too hard to just use togglePresence ?

I needed it to show/hide a component based on some state, where that state is not triggered by button click. For example (a simplified example)...

const showMessage = fieldOne && fieldTwo

React.useEffect(() => {
  if (showMessage) {
    showPresence()
    return
  }
  hidePresence()
}, [showMessage])

[jlkiri]

I see! It can be pretty easily done with togglePresence but yeah maybe hide/show is a more intuitive API?

const SomeComponentWithProps = (props) => {
  const isFirstRender = React.useRef(true);
  const popup = useAnimatePresence({
    variants: popupVariants,
    initial: props.showPopup ? "visible" : "hidden",
    options: {
      stiffness: 200,
      mass: 3,
      damping: 30
    }
  });

  React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    popup.togglePresence();
  }, [props.showPopup]);

  return popup.isRendered && <Toast ref={popup.ref} />;
};

Here's the working example: https://codesandbox.io/s/animate-popup-based-on-state-seu4r

[jacobclyne]

+1