@proyecto26/animatable-component-react

<animatable/> for React

Introduction

React specific wrapper for animatable-component component.

Why?

Most people who use React don’t use Web Components and there're some limitations handling data with Custom Components from React. Thus, this React component was created not to need to reference their Custom Elements using a ref and manually attach the events, this makes working with AnimatableComponent not cumbersome 👍🏻

Usage

import React, { Component } from 'react'
import {
  AnimatableComponent,
  ANIMATIONS,
  EASING
} from '@proyecto26/animatable-component-react'

const App = () => {
  return (
    <AnimatableComponent
      autoPlay
      delay={300}
      duration={800}
      composite='add'
      direction='alternate'
      iterations={Infinity}
      animation={ANIMATIONS.TADA}
      easing={EASING.EASE_IN_OUT_BACK}
      onStart={() => console.log('Starting animation')}
      onFinish={() => console.log('Finished animation')}
      onCancel={() => console.log('Cancelled animation')}
    >
      <div>
        <p>HELLO WORLD</p>
      </div>
    </AnimatableComponent>
  )
};
export default App;

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Happy coding 💯

Made with ❤️