react-slik

1.0.1 • Public • Published

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

Package Sidebar

Install

npm i react-slik

Weekly Downloads

10

Version

1.0.1

License

MIT

Last publish

Collaborators

  • jakesidsmith