CODEWITHSUNDEEP
cssreactjsonclickhover
andrei141592
andrei141592

Reputation: 1

How to trigger onClick and onHover CSS animation with ReactJS?

How I can trigger the onClick and onHover CSS animations for the bellow ReactJS button component?

I've tried using ref = {input => (this.inputElement = input)}, but only clicked the button, no animation.

          <td>
            {this.state.buttons.slice(0, 4).map(btn => (
              <button
                onClick={() => this.handleClick(btn)}
                key={btn}
                className={this.getBadgeClasses(btn)}
              >
                {btn}
              </button>
            ))}
          </td>

I need this so that I can trigger both animations from a keyboard event.

Upvotes: 0

Views: 661

Answers (1)

Viktor Yakubiv
Viktor Yakubiv

Reputation: 127

Basically, onClick works when you press the button with either mouse or keyboard (Enter or Space key).

When you move cursor over the button, the browser dispatches onMouseOver and if you focus the button using a keyboard, the browser dispatches onFocus.

It's very common practice to style :hover and :focus styles together. To add CSS animation to buttons simply pass :focus to it like below:

.btn-classes:hover,
.btn-classes:focus {

}

However, if you want to add JS animation to the component, pass onFocus prop to button. The following may be helpful to you:

          <td>
            {this.state.buttons.slice(0, 4).map(btn => (
              <button
                onClick={() => this.handleClick(btn)}
                onFocus={() => this.handleFocus(btn)}
                key={btn}
                className={this.getBadgeClasses(btn)}
              >
                {btn}
              </button>
            ))}
          </td>

Upvotes: 3

Related Questions