react-mixitup

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

![GitHub Repo stars](https://github.com/ricsam/react-mixitup)

![Edit in CodeSandbox](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://www.npmjs.com/package/react-mixitup) ![npm](https://www.npmjs.com/package/react-mixitup)

`See documentation`

`tsx import { ReactMixitup } from 'react-mixitup';

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

return (


      
              keys={keys}
        renderCell={(key, style, ref) => (
                      key={key}
            ref={ref}
            style={{
              // You must set the transition property here!
              transition: 'transform 300ms linear',
              ...style,
            }}
          >
            {key}


        )}
        renderWrapper={(style, ref, cells) => {
          return (
                          style={{
                transition: 'height 300ms ease',
                display: 'flex',
                ...style
              }}
              ref={ref}
            >
              {cells}

react-mixitup

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

![GitHub Repo stars](https://github.com/ricsam/react-mixitup)

![Edit in CodeSandbox](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://www.npmjs.com/package/react-mixitup) ![npm](https://www.npmjs.com/package/react-mixitup)

`See documentation`

`tsx import { ReactMixitup } from 'react-mixitup';

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

return (


      
              keys={keys}
        renderCell={(key, style, ref) => (
                      key={key}
            ref={ref}
            style={{
              // You must set the transition property here!
              transition: 'transform 300ms linear',
              ...style,
            }}
          >
            {key}


        )}
        renderWrapper={(style, ref, cells) => {
          return (
                          style={{
                transition: 'height 300ms ease',
                display: 'flex',
                ...style
              }}
              ref={ref}
            >
              {cells}

react-mixitup

react-mixitup

Getting Started

`See documentation`

License

react-mixitup

react-mixitup

Getting Started

`See documentation`

License