Survolez le style dans React

Nous présenterons plusieurs façons de styliser les effets de survol dans React.

Utiliser les effets de survol et définir des styles pour les effets de survol dans React

Les effets de survol sont un excellent moyen d’améliorer nos applications Web et de les rendre conviviales. Ces effets visuels sont excellents et aident à garder les utilisateurs heureux.

Nous pouvons également utiliser des effets de survol dans nos applications React pour les rendre conviviales et intéressantes en quelques étapes simples. Commençons par un exemple pour comprendre comment nous pouvons utiliser les effets de survol et définir des styles pour nos effets de survol.

Créons une nouvelle application en utilisant la commande suivante.

# react
npx create-react-app my-app

Après avoir créé notre nouvelle application dans React, nous irons dans notre répertoire d’application à l’aide de cette commande.

# react
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# react
npm start

Nous devons installer quelques bibliothèques pour nous aider à implémenter des effets de survol dans notre application.

Nous allons exécuter la commande suivante pour installer react-hook pour le survol.

# react
npm i @react-hook/hover

Nous allons lancer la commande suivante pour installer dash-ui/styles.

# react
npm i @dash-ui/styles

Une fois que nous avons installé nos bibliothèques, nous devons importer useHover et styles dans le fichier App.js.

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

Maintenant, nous allons définir nos éléments Hovertarget et Hovered dans export default function App(). Et nous renverrons un div qui changera son nom de classe une fois qu’il est survolé et aura un ref de Hovertarget, et il produira un style survolé si quelqu’un survole dessus ou un style par défaut si personne ne survole dessus.

# 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>
  );
}

Maintenant, nous allons définir nos styles CSS pour les classes Hovered et default. Donc, notre code dans App.js ressemblera à ci-dessous.

# 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;
  `
});

Production :

Maintenant, essayez de styliser nos effets de survol en utilisant style.css au lieu de Instyle elements. Tout d’abord, nous allons créer un nouveau fichier en tant que New.js, et à l’intérieur de celui-ci, nous renverrons un div avec une classe New. Nous allons également importer style.css dans ce nouveau fichier. Donc, notre code ressemblera à ci-dessous.

# react
import "./styles.css"

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

Nous allons maintenant importer ce nouveau fichier dans index.js pour l’afficher sur la page principale dans React et afficher le composant New après le composant App. Notre code ressemblera à ci-dessous.

# 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
);

Maintenant, stylisons nos nouveaux effets div et hover en utilisant 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;
}

Production :

Sortie de survol :