Estilo Hover en React

Presentaremos múltiples formas de diseñar efectos de desplazamiento en React.

Usar efectos de desplazamiento y establecer estilos para efectos de desplazamiento en React

Los efectos de desplazamiento son una excelente manera de mejorar nuestras aplicaciones web y hacerlas fáciles de usar. Estos efectos visuales son geniales y ayudan a mantener contentos a los usuarios.

También podemos usar efectos de desplazamiento en nuestras aplicaciones React para que sean fáciles de usar e interesantes con pasos sencillos. Comencemos con un ejemplo para comprender cómo podemos usar efectos de desplazamiento y establecer estilos para nuestros efectos de desplazamiento.

Vamos a crear una nueva aplicación usando el siguiente comando.

# react
npx create-react-app my-app

Después de crear nuestra nueva aplicación en React, iremos a nuestro directorio de aplicaciones usando este comando.

# react
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# react
npm start

Debemos instalar algunas bibliotecas para ayudarnos a implementar efectos de desplazamiento en nuestra aplicación.

Ejecutaremos el siguiente comando para instalar react-hook para pasar el mouse.

# react
npm i @react-hook/hover

Ejecutaremos el siguiente comando para instalar dash-ui/styles.

# react
npm i @dash-ui/styles

Una vez que hayamos instalado nuestras bibliotecas, debemos importar useHover y styles en el archivo App.js.

# react
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

Ahora, definiremos nuestros elementos Hovertarget y Hovered dentro de export default function App(). Y devolveremos un div que cambiará su nombre de clase una vez que se desplace y tenga una ref de Hovertarget, y generará un estilo desplazado si alguien se desplaza sobre él o un estilo predeterminado si nadie se desplaza sobre él.

# react
export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

Ahora, definiremos nuestros estilos CSS para las clases Hovered y default. Así que nuestro código en App.js se verá como a continuación.

# react
import React from "react";
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

const hoverStyle = styles({
  default: `
    background-color: lightblue;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  `,
  Hovered: `
    background-color: lightgreen;
    color: white;
  `
});

Producción:

Ahora, intente diseñar nuestros efectos de desplazamiento usando style.css en lugar de elementos Instyle. Primero, crearemos un nuevo archivo como New.js, y dentro de él devolveremos un div con una clase New. También importaremos style.css en este nuevo archivo. Así que nuestro código se verá como a continuación.

# react
import "./styles.css"

export default function New() {
  return <div className="New">CSS Style</div>;
}

Ahora importaremos este nuevo archivo en index.js para mostrarlo en la página principal de React y mostrar el componente New después del componente App. Nuestro código se verá como a continuación.

# react
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import New from "./New.js";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
    <New />
  </StrictMode>,
  rootElement
);

Ahora, diseñemos nuestros nuevos efectos div y hover usando CSS.

# react
.New{
  background-color: lightgreen;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.New:hover{
  background-color: lightblue;
    color: white;
}

Producción:

Salida de desplazamiento: