Prefixing event handlers (a-la onWebkitAnimationEnd)

The following works great for browsers that don’t need a prefix, but fails for browsers that do.

<div onAnimationEnd={this.onAnimationEnd} />

What is the best way to handle this for browsers that need the webkit prefix for this event?

[marvinhagemeister]

You could use a simple helper function to add prefixes:

function addPrefix(name, fn) {
  const renamed = name.charAt(0).toUpperCase() + name.slice(1);
  return {
    [name]: fn,
    ["webkit" + renamed]: fn,
  }
}

// Usage
<div {...addPrefix("onAnimationEnd", this.onAnimationEnd)} />

// output:
<div onAnimationEnd={this.onAnimationEnd} webkitOnAnimationEnd={this.onAnimationEnd} />

[bartlewis]

Thanks a ton @developit . This is working well.

My final solution looks something like this:

function getAnimationEndEventName() {
  const animations = {
    animation: 'animationend',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (let key in animations) {
    if (document.body.style[key] !== undefined) {
      return animations[key];
    }
  }

  return false;
}

const animationEndEventName = getAnimationEndEventName();
if (animationEndEventName !== 'animationend') {
  window.addEventListener(animationEndEventName, e => {
    const event = new Event('animationend', { bubbles: true });
    e.target.dispatchEvent(event);
  });
}