Skip to content

Instantly share code, notes, and snippets.

@aholachek
Last active Sep 29, 2018
Embed
What would you like to do?
React Flip Toolkit Tutorial
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);
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment