For animating components based on state using CSS, I recommend you to take a look at React Transition Group. It handles the logic for toggling the CSS classes based on the component's state (mount/unmount). If I understand your goal correctly, you could achieve something similar using enter & enter-active classes to show and then hide the component after a delay.
As @jdmg94
mentioned, you can also take a look at React Spring. It's an excellent library for animating your components, and I'm a big fan of the hooks API it provides. But, it depends on your needs and if you plan to use it in other places. It introduces a new API, so if you only want to animate this component, getting started with React Transition Group might be a first good step.
Does react transition group work on state changes compared to just mount/unmounting?
It looks like React Spring is a good option - do you know if it's necessary for very easy animations like fading in / fading out and what has your experience been with it?
Thank you so much for commenting and reading through for some suggestions :)
It looks like React Spring is a good option - do you know if it's necessary for very easy animations like fading in / fading out and what has your experience been with it?
I don't think it's necessary to bring React Spring for simple animations, especially if it's an isolated use case.
In my experience, managing animations beyond fade in/fade out with different states can be annoying to build with CSS classes compared to an approach like React Spring. (Outside React ecosystem, I would recommend using something like GSAP.)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Well done for your first custom hook!
For animating components based on state using CSS, I recommend you to take a look at React Transition Group. It handles the logic for toggling the CSS classes based on the component's state (mount/unmount). If I understand your goal correctly, you could achieve something similar using
enter&enter-activeclasses to show and then hide the component after a delay.As @jdmg94 mentioned, you can also take a look at React Spring. It's an excellent library for animating your components, and I'm a big fan of the hooks API it provides. But, it depends on your needs and if you plan to use it in other places. It introduces a new API, so if you only want to animate this component, getting started with React Transition Group might be a first good step.
Does react transition group work on state changes compared to just mount/unmounting?
It looks like React Spring is a good option - do you know if it's necessary for very easy animations like fading in / fading out and what has your experience been with it?
Thank you so much for commenting and reading through for some suggestions :)
Yes, you can use the
inprop. For instanceThere is a CodeSandbox in the documentation that can help you to visualize how it works reactcommunity.org/react-transitio...
I don't think it's necessary to bring React Spring for simple animations, especially if it's an isolated use case.
In my experience, managing animations beyond fade in/fade out with different states can be annoying to build with CSS classes compared to an approach like React Spring. (Outside React ecosystem, I would recommend using something like GSAP.)