Como implementar hover no estilo inline do React JS

Neste artigo você aprenderá a como utilizar hover no estilo inline do React JS, uma ação não tão comum mas bem interessante

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em design web e desenvolvimento, o efeito hover é um dos mecanismos mais utilizados para realçar elementos e proporcionar interatividade aos usuários.

Tradicionalmente, com CSS puro, aplicar estilos de hover é um processo direto. Entretanto, quando se trata de React JS e estilos inline, isso pode se tornar um pouco mais desafiador.

Neste artigo, mergulharemos em como implementar hover usando estilos inline em React JS.

O desafio dos estilos inline

Em React, o uso de estilos inline é frequentemente preferido em alguns cenários por várias razões: facilidade de uso, escopo local e evitando a necessidade de arquivos CSS separados.

Porém, estilos inline não aceitam pseudo-selectores do CSS, como :hover. Então, como conseguimos esse efeito?

Utilizando o estado local para simular hover

Uma abordagem comum para lidar com hover em React com estilos inline é usar o estado local do componente e os manipuladores de eventos.

Exemplo básico:

import React, { useState } from 'react';

function BotaoHover() {
  const [isHovered, setIsHovered] = useState(false);

  const estiloBase = {
    padding: '10px 20px',
    backgroundColor: 'blue',
    color: 'white',
    border: 'none',
    cursor: 'pointer'
  };

  const estiloHover = {
    backgroundColor: 'darkblue'
  };

  return (
    <button
      style={isHovered ? {...estiloBase, ...estiloHover} : estiloBase}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      Clique em mim
    </button>
  );
}

Neste exemplo, quando o mouse entra no botão (onMouseEnter), definimos isHovered como true e, quando sai (onMouseLeave), voltamos para false. Baseado nesse estado, aplicamos diferentes estilos.

Componentes reutilizáveis com hover

À medida que sua aplicação cresce, é provável que você queira reutilizar essa lógica de hover em vários lugares. Uma forma de fazer isso é criar um componente reutilizável.

Exemplo de um componente reutilizável:

import React, { useState } from 'react';

function ComHover(Componente) {
  return function ComponenteComHover(props) {
    const [isHovered, setIsHovered] = useState(false);

    return (
      <div 
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <Componente isHovered={isHovered} {...props} />
      </div>
    );
  };
}

Você pode agora envolver qualquer componente com ComHover e ele receberá uma prop isHovered que pode ser usada para aplicar estilos condicionalmente.

Alternativas e bibliotecas

Embora a solução anterior funcione bem, há várias bibliotecas no ecossistema React que fornecem soluções mais completas e otimizadas para estilos, incluindo a capacidade de lidar com pseudo-selectores como hover.

Algumas dessas bibliotecas incluem styled-components, emotion e radium.

Por exemplo, com styled-components, você pode criar facilmente componentes estilizados com hover:

import styled from 'styled-components';

const Botao = styled.button`
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function MeuComponente() {
  return <Botao>Clique em mim</Botao>;
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Em React JS, implementar efeitos hover com estilos inline exige uma abordagem diferente do CSS tradicional.

Com o uso de estado local e manipuladores de eventos, podemos simular com eficácia esses efeitos.

No entanto, para aplicações maiores ou necessidades mais complexas, bibliotecas de estilização externas podem ser uma opção atrativa.

Independentemente da abordagem escolhida, o React oferece a flexibilidade necessária para criar interações dinâmicas e atraentes para seus usuários.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.