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 |