React-dancing NPM | npm.io

1.0.5 • Published 12 months ago

Install

Weekly downloads

148

License

ISC

Repository

Last release

12 months ago

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

@infinitebrahmanuniverse/nolb-react-da @everything-registry/sub-chunk-2549 @zalastax/nolb-react-da

12 months ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago