JSFiddle - React, Tailwind, and code Playground

by Kye Hohenberger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/data-driven-motion.min.js"></script>
<div id="app"></div>

CSS

body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  list-style: none;
  margin-left: 160px;
}

li {
  padding: 0;
  font-size: .6em;
  font-weight: lighter;
  text-align: center;
}

p {
  text-align: center;
}

Babel + JSX

const { createElement: h, Component, render } = React
const { Motion } = DDM // https://github.com/tkh44/data-driven-motion

let items = []
for (let i = 100; i > 0; i--) {
  items[i] = { id: i, name: `Item ${i}`, username: `User ${i}` }
}
const WOBBLY_SPRING = { stiffness: 280, damping: 30 }

class App extends Component {
  state = {
    filter: 2
  }

  render () {
    return (
      <div>
        <input
          style={{
            width: '100%',
            maxWidth: 400,
            minWidth: 280,
            fontSize: '1em',
            margin: 8
          }}
          type={'range'}
          min={2}
          max={15}
          step={1}
          value={this.state.filter}
          onChange={({ target: { value } }) => this.setState({ filter: value })}
        />
        <p>Divisible by {this.state.filter}</p>
        <ListWrapper
          data={items.filter((d) => (d.id % this.state.filter) === 0).map((d, i)  => {
          	d.index = i
            return d
          })}
        />
      </div>
    )
  }
}

class ListWrapper extends Component {
  render () {
    return (
      <Motion
        data={this.props.data}
        component={<ul style={{ position: 'relative', width: '100%', backgroundColor: 'white', perspective: 1000 }} />}
        getKey={(data, i) => i + ''}
        onComponentMount={(data, i) => {
          return {
            opacity: 1,
            hue: i * 4 % 360,
            xOffset: 0,
            yOffset: i * 14
          }
        }}
        onRender={(data, i, spring) => {
          return {
            opacity: spring(1),
            hue: spring(i * 4 % 360),
            xOffset: spring(0, WOBBLY_SPRING),
            yOffset: spring(i * 16, WOBBLY_SPRING)
          }
        }}
        onRemount={({ key, data, style }) => {
          return {
            opacity: 1,
            hue: 0,
            xOffset: -100,
            yOffset: 0
          }
        }}
        onUnmount={({ key, data, style }, spring) => {
          return {
...