@webileapps/react-stack-cards
v1.0.9
Published
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/
Downloads
123
Readme
React-Stack-Cards
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 :blush:
- Supports Typescript
Available components:
ToggleCard
TinderLikeCard
StackCard
Installation
You can install react-stack-cards from npm
npm i -S react-stack-cards
Or use yarn
yarn add react-stack-cards
Simple usage
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>
);
}
}
Props
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
Methods
swipe()
- swipe method for TinderLikeCard
License
MIT Licensed. Copyright (c) 2019 yoloten