https://github.com/ricsam/react-mixitup

Animate the addition, removal and shuffling of elements using css transitions with the react-mixitup component
https://github.com/ricsam/react-mixitup

animation grid javascript react transition typescript

Last synced: 3 months ago
JSON representation

Animate the addition, removal and shuffling of elements using css transitions with the react-mixitup component

• Host: GitHub
• URL: https://github.com/ricsam/react-mixitup
• Owner: ricsam
• License: mit
• Created: 2019-03-31T16:51:54.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2025-03-11T22:27:18.000Z (4 months ago)
• Last Synced: 2025-04-13T05:04:00.120Z (3 months ago)
• Topics: animation, grid, javascript, react, transition, typescript
• Language: TypeScript
• Homepage: https://react-mixitup.ricsam.dev
• Size: 3.58 MB
• Stars: 8
• Watchers: 0
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-mixitup

> Animate the addition, removal and shuffling of elements in react.

[![GitHub Repo stars](https://img.shields.io/github/stars/ricsam/react-mixitup?style=social)](https://github.com/ricsam/react-mixitup)

[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/ricsam/react-mixitup-codesandbox/main?file=%2Fpages%2Findex.tsx)

## Getting Started

Install react-mixitup

```sh

npm install --save react-mixitup

```

[![npm](https://img.shields.io/npm/v/react-mixitup)](https://www.npmjs.com/package/react-mixitup)

[![npm](https://img.shields.io/npm/dw/react-mixitup?label=npm%20downloads)](https://www.npmjs.com/package/react-mixitup)

# See [documentation](https://react-mixitup.ricsam.dev/docs/intro)

```tsx

import { ReactMixitup } from 'react-mixitup';

function Example() {

  const [keys, setKeys] = React.useState([1,2,3]);

  return (

    


       {

        setKeys(keys[0] === 1 ? [3,2,1] : [1,2,3]);

      }}>

        Mixitup

      

       (

          


            {key}

          

        )}

        renderWrapper={(style, ref, cells) => {

          return (

            


              {cells}

            

          );

        }}

        dynamicDirection="horizontal"

        transitionDuration={300}

      />

    

  )

}

```


## License

MIT © [ricsam](https://github.com/ricsam)