Controlar el Scroll horizontal en React con el Mouse

Hace poco estuve trabajando en esta aplicación (https://salary-comparator.vercel.app/) para comparar los diferentes salarios a lo largo de nuestras carreras y me encontré con varios desafíos que pude abordar gracias a un manejo correcto de los principios de React.

Por eso antes de contar como lo hice, quiero recomendar los articulos 5 pasos indispensables para crear tus componentes en React y 5 Pasos esenciales para definir el STATE en React

Si has paseado por los conceptos básicos de React, sabrás que la reactividad de una interfaz esta definida esencialmente por el estado, por lo que para hacer que pudiéramos mover este componente de manera horizontal necesitaríamos un estado que pudiera ser asociado con su posición en la horizontal, ya sea usando la propiedad left (en nuestro caso) o right

style={{ left:`${limit - left}px` }}        

En nuestro ejemplo, asociamos la propiedad css left, con el estado left. Pero, lo dificil no es realmente mover un elemento, lo complicado es definir los limites de ese movimiento, por lo que definimos un limite (limit) que sería el tope hasta el cual se movería nuestro componente arrancando desde cero como posición inicial.

scrollWidth y offsetWidth

Este limite estaría definido por el scrollWidth y el offsetWith, quiene son el ancho visible del elemento y el ancho real respectivamente. Una sencilla operación aritmética nos permite obtener este valor:

En la imagen usamos una referencia al elemento obtenida con el hook useRef para acceder a las propiedades necesarias para calcular el limite. A esta función a la vez la llamamos usando el hook de useEffect y para asegurarnos que se ejecute cuando este disponible el elemento, agregaremos en el array de dependencias la referencia al elemento.

Pero también tenemos que pensar en el caso que el usuario cambie el tamaño del navegador; para esto usamos el evento resize del navegador y accedemos a este usando el hook useEffect.

De esta forma, tenemos que nuestra función sera invocada en dos casos: cuando cambie el contenido de la lista, y cuando cambie el tamaño del navegador

Ahora, teniendo el limite al que puede moverse nuestro elemento solo resta usar el evento onWheel para detectar el movimiento de la rueda del botón y cambiar nuestro estado left y el respectivo estilo css.

No olvides si llegas a implementarlo escoger un step que resulte natural a la vista del usuario. Gracias por leer.