behnammodi / react-dancing

react-dancing is a bit module for animation base on requestAnimationFrame

For old version of react-dancing please go to react-dancing version 0

Installation

Using npm:

npm install react-dancing

Big advantages

• Animation base on requestAnimationFrame
• Animation without re-render component
• Less than 0.6 KB 💪 😀 bundlephobia
• Without dependency

Usage

import React from 'react';
import { useDancer } from 'react-dancing';

function App() {
  const [ref, start, stop] = useDancer({
    interpolate: {
      transform: (x) => `translateX(${x * 100}px)`,
    },
  });

  return (
    <div>
      <div ref={ref}>React Dancing</div>
      <button onClick={() => start(0)}>Back</button>
      <button onClick={() => start(1)}>Go</button>
      <button onClick={() => stop()}>Stop</button>
    </div>
  );
}

useDancer config

Prop	Default	Desc
interpolate	{}	type is object and you must interpolate x to styles, ex: { height: x => `${x * 500}px` }
duration	200	type is number and base on milisecond
delay	0	type is number and base on milisecond
timingFunction	x => x	type is function you can find sample in easings.net
defaultValue	0	type is number, if you want to reverse aninmation set 1 and run start(0)

You can see more sample of react-dancing in here

Compare size

Package	Size
react-spring	10.47 KB
framer-motion	28.15 KB
react-motion	4.76 KB
react-move	4.39 KB
react-dancing 💪 😀	0.6 KB
Last update	2020 Nov 30