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;
}
ul {
  list-style: none;
}

li {
  padding: 0;
  font-size: 1.2em;
  font-weight: lighter;
  text-align: left;
}

Babel + JSX

const { createElement: h, Component, render } = React;
/** @jsx h */
const { Motion } = DDM;

let items = [];
for (let i = 180; i--;) {
  items[i] = { id: i, name: `Item ${i + 1}`, username: `User ${i + 1}` };
}
const WOBBLY_SPRING = { stiffness: 220, damping: 20 }

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={1}
          max={15}
          step={1}
          value={this.state.filter}
          onChange={({ target: { value } }) => this.setState({ filter: value })}
        />
        <div>Id % {this.state.filter}</div>
        <ListWrapper
          data={items.filter((_, i) => i % this.state.filter)}
        />
      </div>
    )
  }
}

class ListWrapper extends Component {

  render () {
    return h(Motion, {
      data: this.props.data,
      component: h('ul', { style: { width: '100%', backgroundColor: 'white' } }),
      getKey: data => data.id + data.name,
      onComponentMount: (data, i) => {
        // no springs
        return {
          opacity: 0,
          hue: i * 4 % 360,
          height: 0
        }
      },
      onRender: (data, i, spring) => {
        // springs
        return {
          opacity: spring(1),
          hue: spring(i * 4 % 360),
          height: spring(24, WOBBLY_SPRING)
        }
      },
      onRemount: ({ key, data, style }) => {
        return {
          opacity: 0,
          hue: 0,
          height: 0
        }
      },
      onUnmount: ({ key, data, style }, spring) => {
        return {
          opacity: spring(0),
          hue: spring(0),
          height: spring(0, WOBBLY_SPRING)
        }
      },
      render: (key, data, style) => {
        return h('li', {
          key, style: {
            opacity: style.opacity,
            height:...