CODEWITHSUNDEEP
javascriptreactjseventsdom-eventsanimate.css
Fernando B
Fernando B

Reputation: 891

React JS toggle/ adding a class on hover

I'm using the animate.css library with React and trying to set up a element (button) to pulse when hovered over. Tried to look through the docs and here but can't find a way to achieve this simple task. If anyone has achieved this or found a reference would greatly be appreciated.

class App extends Component {

   constructor(props) {
    super(props);

    this.handleHover = this.handleHover.bind(this);
  }

  handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
  }

  render() {
    const btnClass = this.state.isHovered ? "pulse animated" : "";

    return (
      <div>
        <button className={btnClass} onMouseEnter={this.state.handleHover} onMouseLeave={this.state.handleHover}>Test</button>
      </div>
    );
  }
}

export default App;

Upvotes: 22

Views: 54947

Answers (2)

ice1080
ice1080

Reputation: 334

What about using the css :hover property? This worked way better for me by changing my hover class section in the css file to use :hover instead of react.

I tried using the above suggestions but react didn't seem fast enough to get it so the state would become wrong if the mouse moved slowly over the button.

Upvotes: 4

Chase DeAnda
Chase DeAnda

Reputation: 16441

You can use the onMouseEnter and onMouseLeave events on the component and toggle the class accordingly.

constructor(){
    super();
    this.state = {
        isHovered: false
    };
    this.handleHover = this.handleHover.bind(this);
}
handleHover(){
    this.setState(prevState => ({
        isHovered: !prevState.isHovered
    }));
}
render(){
    const btnClass = this.state.isHovered ? "pulse animated" : "";
    return <button className={btnClass} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></button>
}

Update 05/07/19: Hooks

import React, { useState } from 'react';

export default function Component () {
  const [hovered, setHovered] = useState(false);
  const toggleHover = () => setHovered(!hovered);
  return (
    <button 
      className={hovered ? 'pulse animated' : ''}
      onMouseEnter={toggleHover}
      onMouseLeave={toggleHover}
    >
    </button>
  )
}

Upvotes: 62

Related Questions