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

    Install

    npm i react-slik

    DownloadsWeekly Downloads

    68

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • jakesidsmith