React Flip Toolkit Tutorial

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";

import "./styles.css";

const listData = [0, 1, 2, 3, 4, 5, 6, 7];
const colors = ["#6da5ff", "#7971ea", "#5900d8"];
// we'll iterate over this array to create groups of 3 components
const baseArray = [...Array(3).keys()];

const ListItem = ({ index, color, onClick }) => {
  return (
    <Flipped flipId={`listItem-${index}`}>
      <div
        className="listItem"
        style={{ backgroundColor: color }}
        onClick={() => onClick(index)}
      >
        <div className="listItemContent">
          <div className="avatar" />
          <div className="description">{baseArray.map(i => <div />)}</div>
        </div>
      </div>
    </Flipped>
  );
};

const ExpandedListItem = ({ index, color, onClick }) => {
  return (
    <Flipped flipId={`listItem-${index}`}>
      <div
        className="expandedListItem"
        style={{ backgroundColor: color }}
        onClick={() => onClick(index)}
      >
        <div className="expandedListItemContent">
          <div className="avatar avatarExpanded" />
          <div className="description">{baseArray.map(i => <div />)}</div>
          <div className="additional-content">{baseArray.map(i => <div />)}</div>
        </div>
      </div>
    </Flipped>
  );
};

class AnimatedList extends Component {
  state = { focused: null };
  onClick = index =>
    this.setState({
      focused: this.state.focused === index ? null : index
    });
  render() {
    return (
      <Flipper 
      flipKey={this.state.focused}
      className="staggered-list-content"
      >
        <ul className="list">
          {listData.map(index => {
            return (
              <li>
                {index === this.state.focused ? (
                  <ExpandedListItem
                    index={this.state.focused}
                    color={colors[this.state.focused % colors.length]}
                    onClick={this.onClick}
                  />
                ) : (
                  <ListItem
                    index={index}
                    key={index}
                    color={colors[index % colors.length]}
                    onClick={this.onClick}
                  />
                )}
              </li>
            );
          })}
        </ul>
      </Flipper>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AnimatedList />, rootElement);

styles.scss

.staggered-list-content {
  width: 400px;
  margin: 2rem auto;
}
.list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
}
.list li {
  width: 100%;
}
.list li + li {
  margin-top: 1rem;
}
.listItem {
  width: 100%;
  cursor: pointer;
}
.listItemContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem;
}
.avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 100px;
  background-color: hsla(0, 0%, 100%, 0.3);
  margin-right: 2rem;
}
.avatarExpanded {
  width: 8rem;
  height: 8rem;
  margin-right: 0;
  margin-bottom: 1rem;
}
.description > div {
  background-color: hsla(0, 0%, 100%, 0.3);
  width: 14rem;
  border-radius: 6px;
  height: 0.5rem;
}
.description > div:nth-of-type(2) {
  width: 11rem;
}
.description > div:nth-of-type(3) {
  width: 8rem;
}
.description > div + div {
  margin-top: 1rem;
}
.expandedListItem .description {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.expandedListItem {
  cursor: pointer;
}
.expandedListItemContent {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.additional-content {
  width: 100%;
  margin-top: 2rem;
}

.additional-content > div {
  opacity: 0;
  border-radius: 3px;
  background-color: hsla(0, 0%, 100%, 0.3);
  height: 5rem;
}