Question

173

React JS toggle/ adding a class on hover

rated 0 times [ 175] [ 2] / answers: 1 / hits: 47924 / 7 Years ago, thu, june 15, 2017, 12:00:00

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;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yesseniadajab

Add To Favorites

Follow

Total Points: 258

Total Questions: 101

Total Answers: 127

Location: Mexico

Member since Mon, Sep 12, 2022

2 Years ago

answered 7 Years ago jaredsages · Accepted Answer

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>

  )

}