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.

Adicionar um bloco curto chamado ‘onMouseEnter ou onMouseOver: qual usar?’ explicando de forma qualitativa a diferença: o onMouseEnter dispara só quando o ponteiro entra no elemento, enquanto o onMouseOver também dispara ao passar pelos filhos internos por causa do borbulhamento do evento. Fechar dizendo que, pra simular hover num botão ou card, o onMouseEnter e o onMouseLeave costumam dar menos dor de cabeça

Adicionar uma seção ‘Hover em uma lista de itens’ mostrando o problema de usar um único isHovered pra vários elementos (todos acendem juntos) e a saída de guardar o índice ou id do item que está sob o mouse no estado, aplicando o estilo só quando o item corresponde ao que está hovered. Explicar o porquê antes: um booleano só não distingue QUAL card está sob o mouse

Adicionar um bloco mostrando um Hook customizado useHover como alternativa moderna ao componente de ordem superior, retornando uma ref e o estado isHovered pra plugar em qualquer elemento. Introduzir com a analogia de que é a mesma ideia de reaproveitar a lógica, só que no formato de Hook que combina melhor com componentes de função

Adicionar uma observação sobre acessibilidade: hover simulado por onMouseEnter só reage ao mouse, então quem navega pelo teclado não recebe o mesmo realce. Sugerir de forma qualitativa espelhar o efeito nos eventos de foco (onFocus e onBlur) pra não deixar o usuário de teclado de fora

Adicionar um FAQ com 3 a 4 perguntas curtas respondendo direto as buscas: ‘Por que o :hover não funciona no estilo inline do React?’ (pseudo-selectores não existem em objeto de estilo inline, daí simular pelo estado), ‘Como fazer hover inline no React sem biblioteca?’ (useState + onMouseEnter/onMouseLeave), ‘Estilo inline ou styled-components pra hover?’ (inline resolve caso simples, biblioteca compensa quando o app cresce), ‘Dá pra fazer hover em vários elementos?’ (sim, guardando o id/índice do item no estado). Cada resposta em 2 a 3 linhas