Skip to content

JakeSidSmith/react-slik

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Slik CircleCI

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 />