Element animations library for React

element-animations.ts

// available animations
export const Animations = {
  WIGGLE: 'u-anim-wiggle',
};

const ANIMATION_END = 'animationend';

// HOF for callbacks
export const animateWith = (animation: string) =>
  (ev: any) => {
    const {currentTarget} = ev;
    currentTarget.addEventListener(ANIMATION_END, function handler() {
      currentTarget.classList.remove(animation);
      currentTarget.removeEventListener(ANIMATION_END, handler);
    });
    currentTarget.classList.add(animation);
  };

/*
CSS
// wiggle animation
.u-anim-wiggle {
  animation: u-anim-wiggle 0.1s cubic-bezier(0.4, 1, 0.75, 0.9) 3;
}

@keyframes u-anim-wiggle {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}
*/

Usage:

import { Animations, animateWith} from 'element-animations';

<button type="button" onClick={animateWith(Animations.WIGGLE)}>
   MAD
</button>