Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoloten/react-stack-cards
Visit the demo page
https://github.com/yoloten/react-stack-cards
Last synced: 2 months ago
JSON representation
Visit the demo page
- Host: GitHub
- URL: https://github.com/yoloten/react-stack-cards
- Owner: yoloten
- License: mit
- Created: 2019-06-09T17:49:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:37:42.000Z (about 2 years ago)
- Last Synced: 2024-10-01T20:52:09.122Z (4 months ago)
- Language: TypeScript
- Homepage: https://yoloten.github.io/react-stack-cards/
- Size: 21.4 MB
- Stars: 46
- Watchers: 1
- Forks: 8
- Open Issues: 27
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-stack-cards - Collection of stack card effects for galleries and preview grids. (UI Frameworks / Component Collections)
- awesome-react-components - react-stack-cards - Collection of stack card effects for galleries and preview grids. (UI Frameworks / Component Collections)
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
```javascript
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 (
alert("Hello")}
>
{ numbers.map( i => {i} )}
Toggle
this.Tinder = node}
className="tinder"
>
{ numbers.map( i =>
{i} )}
Swipe
alert("Hello")}
>
i
);
}
}
```
## 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 element
- `onMouseLeave` - occurs when the mouse pointer is moved out of an element
- `onClick` - occurs when the user clicks on an element
- `isOpen` - 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 element
- `onMouseLeave` - occurs when the mouse pointer is moved out of an element
- `onClick` - occurs when the user clicks on an element
## Methods
- `swipe()` - swipe method for TinderLikeCard
## License
MIT Licensed. Copyright (c) 2019 yoloten