react-spring-animated-grid

width aware animated grid for react

Usage no npm install needed!

<script type="module">
  import reactSpringAnimatedGrid from 'https://cdn.skypack.dev/react-spring-animated-grid';
</script>

README

react-spring-animated-grid

Animated grid responsive to width changes.

Features

Width aware animated reordering elements

Install

npm i react-spring-animated-grid

Preview

example

Usage

import { GridComponent } from 'react-spring-animated-grid'
...
<GridComponent itemMarginRight={10} style={{ width: "300px" }}>
  {elements.map((e, i) => (
    <div
      className="item"
      key={e.text}
      onClick={() => toggleClicked(e.text)}
    >
      {!isClicked(e.text) && e.text}
    </div>
  ))}
</GridComponent>

Demo

https://codesandbox.io/s/animated-grid-demo-ycu8x?file=/src/App.js:793-814