Animaciones con react-spring y React-use-measure, ejemplo práctico con TypeScript

React-spring/web es una biblioteca de animación basada en JavaScript que permite crear animaciones fluidas y dinámicas en aplicaciones web utilizando React. Esta biblioteca se basa en los principios de la física, lo que le permite crear animaciones realistas y de alto rendimiento.

1. Animaciones fluidas y naturales.
2. Alto rendimiento, incluso en aplicaciones con muchos elementos animados.
3. Sintaxis declarativa que se integra fácilmente con React.
4. Soporte para una amplia gama de tipos de animación y propiedades CSS.
5. Control preciso y sincronización de animaciones.
6. Compatibilidad con React Hooks para un código más modular y comprensible.

También analicemos a React-use-measure que es una biblioteca de utilidades para React que permite medir y obtener información sobre los elementos DOM en una aplicación. Proporciona un gancho (hook) personalizado llamado useMeasure que se utiliza para obtener las medidas de un elemento y realizar un seguimiento de los cambios en su tamaño y posición.

Nos sirve para:

1. Obtener medidas precisas de elementos DOM, como el ancho, alto, posición y margen.
2. Realizar un seguimiento de los cambios en el tamaño y posición de los elementos en tiempo real.
3. Hacer cálculos y ajustar el diseño en función de las medidas de los elementos.
4. Optimizar el rendimiento al evitar cálculos innecesarios al utilizar el cambio de tamaño del elemento como activador para acciones específicas.

Veamos el siguiente ejemplo en React usando TypeScript:

Aquí se aprecia una animación donde el botón, expande y contrae su ancho cuando se hace clic en él, y puede ser visualizado ya a medida que hace la animación se aprecia como se llena el elemento con un fondo de color #2d8ca1.

Puedes ver el rénder en el siguiente enlace:

Este proyecto es original de la documentación oficial de React-spring si embargo he realizado algunos cambios para mejorar la sintaxis y funcionalidad, te dejaré el enlace para que puedas descargar las dos versiones y hacer comparaciones didácticas.

Para finalizar me gustaría mencionar que este pequeño ejemplo, también tiene el uso de TypeScript , lo cual puede ser un tema de debate en los comentarios, en dado caso de que quede alguna duda.