react-swipy
)A simple Tinder-like swipeable React component
But @pedro-lb ported this to Typescript and is being mantained here
# NPM
npm install --save react-swipy
# Yarn
yarn add react-swipy
I didn't like the lack of control on mose deck-based swipeable components out there
import React, {Component} from "react";
import Swipeable from "react-swipy"
import Card from "./components/Card";
import Button from "./components/Button";
const wrapperStyles = {position: "relative", width: "250px", height: "250px"};
const actionsStyles = {
display: "flex",
justifyContent: "space-between",
marginTop: 12,
};
class App extends Component {
state = {
cards: ["First", "Second", "Third"],
};
remove = () =>
this.setState(({cards}) => ({
cards: cards.slice(1, cards.length),
}));
render() {
const {cards} = this.state;
return (
<div>
<div style={wrapperStyles}>
{cards.length > 0 ? (
<div style={wrapperStyles}>
<Swipeable
buttons={({left, right}) => (
<div style={actionsStyles}>
<Button onClick={left}>Reject</Button>
<Button onClick={right}>Accept</Button>
</div>
)}
onAfterSwipe={this.remove}
>
<Card>{cards[0]}</Card>
</Swipeable>
{cards.length > 1 && <Card zIndex={-1}>{cards[1]}</Card>}
</div>
) : (
<Card zIndex={-2}>No more cards</Card>
)}
</div>
</div>
);
}
}
export default App;
Number
Offset in px swiped to consider as swipe
Number
Offset when opacity fade should start
Function
Callback executed before swiping, it receives 3 parameters:
Function
Callback executed right after swipe, it receives 'left' or 'right' as first parameter
Function
Callback executed when animation ends
Node
Content of the card
Function
Function that returns a left
and right
function that will force a swipe