Collection of stack card effects exclusively for React that's perfect for galleries and preview grids. Inspired by ideas from tympanus.net. See the demo https://yoloten.github.io/react-stack-cards/
Feautures:
- Animations on hover, swipe and toggle
- Swipe animations allow you to work with big amount of images and colors
- Flexible settings like adding elements into the cards, change duration of animation and etc.
- Effects actually look awesome 😊
- Supports Typescript
Available components:
ToggleCardTinderLikeCardStackCard
You can install react-stack-cards from npm
npm i -S react-stack-cards
Or use yarn
yarn add react-stack-cards
import { ToggleCard, TinderLikeCard, StackCard } from 'react-stack-cards'
class Example extends React.Component {
constructor(props){
super(props)
this.state = {
directionTinder: "swipeCornerDownRight",
directionToggle: "sideSlide",
directionStack: "topRight",
isOpen: false
}
this.Tinder = null
}
onTinderSwipe() {
this.Tinder.swipe()
}
onToggle() {
this.setState({isOpen: !this.state.isOpen})
}
render() {
const arr = ["first", "second", "third", "fourth"]
const numbers = [0, 1, 2, 3]
return (
<div>
<ToggleCard
images={arr}
width="350"
height="240"
direction={this.state.directionToggle}
duration={400}
className="toggle"
isOpen={this.state.isOpen}
onClick={()=> alert("Hello")}
>
{ numbers.map( i => <div>{i}</div> )}
</ToggleCard>
<button onClick={this.onToggle.bind(this)}>Toggle</button>
<TinderLikeCard
images={arr}
width="350"
height="250"
direction={this.state.directionTinder}
duration={400}
ref={(node) => this.Tinder = node}
className="tinder"
>
{ numbers.map( i => <div>{i}</div> )}
</TinderLikeCard>
<button onClick={this.onTinderSwipe.bind(this)}>Swipe</button>
<StackCard
images={arr}
color={"#f95c5c"}
width="350"
height="240"
direction={this.state.directionStack}
onClick={()=> alert("Hello")}
>
<div>i</div>
</StackCard>
</div>
);
}
}Common props for all three components:
children- allows to add children elements (React.Element)className- apply a className to the control (string)direction- select animation type (string)duration- set duration of animation (number)images- array of images to set on the background (array of strings)height- height of the card (string)width- width of the card (string)
children prop can be an array of the elements or single element in TinderLikeCard and ToggleCard. StackCard only supports one element.
Special props for TinderLikeCard:
colors- array of colors to set on the background (array of strings)
Special props for ToggleCard:
colors- array of colors to set on the background (array of strings)onMouseEnter- occurs when the mouse pointer is moved onto an elementonMouseLeave- occurs when the mouse pointer is moved out of an elementonClick- occurs when the user clicks on an elementisOpen- allows you to animate component (boolean)
Special props for StackCard:
color- color to set on the background (string)onMouseEnter- occurs when the mouse pointer is moved onto an elementonMouseLeave- occurs when the mouse pointer is moved out of an elementonClick- occurs when the user clicks on an element
swipe()- swipe method for TinderLikeCard
MIT Licensed. Copyright (c) 2019 yoloten
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent