Binary Coffee

Anima tu proyecto React con react-spring

javascript nodejs react
A la hora de incluir animaciones en nuestro sitio web tenemos un sinf√≠n de posibilidades. Quiz√°s lo m√°s com√ļn seria hacerlo con css puro o con un pre procesador. Hoy les traigo una librer√≠a que no solo anima un componente en tu sitio web, sino que lo hace utilizando f√≠sicas de resorte. Te invito a descubrir esta libreria ... [React Spring](https://www.react-spring.io/) a diferencia de otras librer√≠as de animaciones para react hace uso de animaciones basadas en f√≠sica de resortes, como lo que encontrar√≠as al hacer aplicaciones nativas para iOS o Android. Las animaciones basadas en f√≠sica nos permiten recrear de manera sencilla como un objeto se mueve en la vida real sin tener que definir tiempo o curvas de suavizado. ### Lo que haremos ... En el ejemplo que les traigo usaremos `react-spring` para animar una simple lista de nombres. Lo primero que necesitas es instalar `react-spring` a tu proyecto de React. Para ello puedes emplear uno de los siguientes comandos en la consola dependiendo de tu instalador de paquetes preferido: ``` $ npm i react-spring ``` ``` $ yarn add react-spring ``` Luego de instalado crearemos un nuevo componente y lo llamaremos **List**. Lo primero que haremos ser√° importar las librer√≠as necesarias: ``` //Dependencia de react import React, {useState} from 'react' //Dependencias de react spring import {useSpring, a, config} from 'react-spring' ``` `useSpring` recibe un objeto como par√°metro y dentro del objeto debemos especificar otros objetos con llaves espec√≠ficas que ser√°n nuestras propiedades. Hoy veremos tres de las propiedades principales que recibe este objeto. 1. `to`: Indica destino de la animaci√≥n (**obligatorio**) 2. `from`: Indica el inicio de la animaci√≥n. De no ser especificado se tomaran los valores iniciales de la propiedad css. 3. `config`: Indica el comportamiento de la animaci√≥n `useSpring` devolver√° un objeto con los valores de las propiedades css que modifiquemos, por ejemplo si modificamos el `width` y el `transform` devolver√° un objeto con las propiedades width y tranform. ## Creando nuestro componente A continuaci√≥n creamos un componente sin estado: ``` const List = () => { const [data] = useState(['Juan', 'Pedro', 'Raul', 'Fernando', 'Antonio']) return ( <div> { data.map((name, index) => { return( <ul className="list"> <li key={index} className="item">{name}</li> </ul> ) }) } </div> ) } export default List ``` Dentro del componente declaramos una constante haciendo uso de `useSpring` ``` const animation = useSpring({ from: {transform: 'scale(0)'}, to: {transform: 'scale(1)'} }) ``` Ahora para poder utilizar esta animaci√≥n debemos utilizar el componente `a` de esta manera: ``` <a.li style={animation} key={index} className="item">{name}</a.li> ``` A la etiqueta `li` la sustituimos por `a.li` y a la propiedad `style` le asignamos el objeto creado. El c√≥digo del componente animado quedar√≠a de la siguiente manera: ``` import React, {useState} from 'react' import {useSpring, a, config} from 'react-spring' import './List.css' const List = () => { const [data] = useState(['Juan', 'Pedro', 'Raul', 'Fernando', 'Antonio']) const animation = useSpring({ from: {transform: 'scale(0)'}, to: {transform: 'scale(1)'} }) return ( <div> { data.map((name, index) => { return( <ul className="list"> <a.li style={animation} key={index} className=" item">{name}</a.li> </ul> ) }) } </div> ) } export default List ``` El archivo `List.css` se emple√≥ para agregar algunos estilos a la lista: ``` .list{ display: flex; list-style: none; flex-wrap: wrap; } .item{ border: 1px solid purple; padding: 0.2em 0.8em; margin: 5px; color: orchid; font-weight: bold; cursor: pointer; } ``` Tambi√©n se puede utilizar en el objeto `useSpring` la propiedad `config` para tener mayor control de la animaci√≥n ejemplo: ``` const animation = useSpring({ from: {transform: 'scale(0)'}, to: {transform: 'scale(1)'}, config: { mass: 1, tension: 170, friction: 26, clamp: false, precision: 0.01, velocity: 0, } }) ``` Cabe resaltar que la librer√≠a ya trae algunas configuraciones predefinidas y se pueden utilizar primero importando `config` y luego accediendo a las configuraciones del objeto, ejemplo: ``` const animation2 = useSpring({ from: {transform: 'translateX(-100%)'}, to: {transform: 'translateX(0)'}, config: config.wobbly }) ``` ### Conclusiones De esta manera podemos dotar a nuestra aplicaci√≥n de animaciones mucho mas reales utilizando f√≠sicas de resorte. Espero que este art√≠culo haya sido de tu agrado. Cualquier duda o sugerencia no dude en comentar. Puede acceder al proyecto completo en [Github](https://github.com/inergarcia/react-spring-example)
Opiniones