react-slik

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

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

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

• Create your animations.

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

• Create a component.

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

• 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);
  

• Render your component.

  <AnimatedComponent />