React Slik

React higher order component for Slik animations

About

A library that wraps your React components, providing them with animation values as props when they update.

Installation

Use npm to install react-slik.

npm install react-slik --save --save-exact

I'd recommend pinning to a specific version and using --save-exact and --save to add this to your package.json automatically.

Getting started

1. Require react-slik in the file where you'll be animating.

   import Slik from 'slik';
   import { animate } from 'react-slik';

2. Create your animations.

   const animation = new Slik.Animation({from: 0, to: 1});

3. Create a component.

   class Component extends React.Component {
     render () {
       const { scale } = this.props;
    
       return (
         <div style={{transform: `scale(${scale}, ${scale})`}}>
           Hello, World!
         </div>
       );
     }
   }

4. Animate your component.

   const options = {
     bind: 'update', // Default, update on all events
     startOnMount: true, // Default
     stopOnUnmount: true // Default
   };
    
   const AnimatedComponent = animate(Component, {scale: animation}, options);

5. Render your component.

   <AnimatedComponent />