Make a button/card with on hover state, Method 4: react-spring

Overview

We can use react-spring and React state to implement mouse hover animations.

Key steps

1. Set state hovered on mouse over and mouse out

<div
  onMouseOver={this.setHover}
  onMouseOut={this.cancelHover}
  ...
/>

...

setHover = () => this.setState({ hovered: true });
cancelHover = () => this.setState({ hovered: false });

2. Use a Spring and set different styles according to state.hovered

<Spring
  to={{
    transform: `scale(${this.state.hovered ? 1.2 : 1})`,
    boxShadow: this.state.hovered ? hoverBoxShadow : normalBoxShadow
  }}
>
  {props => (
    <div
      style={props}
      ...
    />
  )}
</Spring>

Check out react-spring for more cool animations.