https://github.com/behnammodi/react-dancing

react-dancing is a bit module for animation base on requestAnimationFrame
https://github.com/behnammodi/react-dancing

animation react

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/behnammodi/react-dancing
• Owner: behnammodi
• Created: 2020-08-27T11:03:54.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-29T11:57:00.000Z (over 1 year ago)
• Last Synced: 2024-05-27T12:35:30.828Z (6 months ago)
• Topics: animation, react
• Language: JavaScript
• Homepage: https://npmjs.com/package/react-dancing
• Size: 1.05 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
For old version of `react-dancing` please go to [react-dancing version 0](https://github.com/behnammodi/react-dancing/tree/version-0)

[![NPM](https://nodei.co/npm/react-dancing.png)](https://nodei.co/npm/react-dancing/)



  











  





  





  





   





  



## Installation

Using npm:

```bash

npm install react-dancing

```

## Big advantages

- Animation base on `requestAnimationFrame`

- Animation without re-render component

- Less than 0.6 KB 💪 😀 [bundlephobia](https://bundlephobia.com/result?p=react-dancing)

- Without dependency

## Usage

```jsx

import React from 'react';

import { useDancer } from 'react-dancing';

function App() {

  const [ref, start, stop] = useDancer({

    interpolate: {

      transform: (x) => `translateX(${x * 100}px)`,

    },

  });

  return (

    


      
React Dancing

       start(0)}>Back

       start(1)}>Go

       stop()}>Stop

    

  );

}

```


## 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](https://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](https://codesandbox.io/s/react-dancing-version-1-8cdli)

## 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** |