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 😊
Available components:
ToggleCard
TinderLikeCard
StackCard
Installation
You can install react-card-effects from npm
npm i -S react-stack-cards
Or use yarn
yarn add react-stack-cards
Simple usage
Component { superprops thisstate = directionTinder: "swipeCornerDownRight" directionToggle: "sideSlide" directionStack: "topRight" isOpen: false thisTinder = null } { thisTinder } { this } { const arr = first second third fourth const numbers = 0 1 2 3 return <ToggleCard images=arr width="350" height="240" direction=thisstatedirectionToggle duration=400 className="toggle" isOpen=thisstateisOpen onClick= > numbers </ToggleCard> <TinderLikeCard images=arr width="350" height="250" direction=thisstatedirectionTinder duration=400 ref= thisTinder = node className="tinder" > numbers </TinderLikeCards> <StackCard images=arr color="#f95c5c" width="350" height="240" direction=thisstatedirectionStack onClick= > <div>i</div> </StackCard> ; }
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