og-react-swipe

A simple, light weight, tinder-like swiping framework for react apps.

og-react-swipe provides 2 ReactJS components that need to be used in conjunction to provide swiping funcitonality.

CardStack - A wrapper for all of your card to be swiped through. Accepted props:

• className (str): optional, provide a custom className for the CardStack
• style (obj): optional, provide custom in-line styling for the CardStack
• diff (int): the number of pixels from the middle that Cards should be dragged before callbacks are fired (default 100px)
• clickBound (int): the number of pixels from the middle that Cards should be dragged before a click event is NOT fired on release of the card (default 1px)
• onRunOut (func): optional, function executed when there are no more cards in the stack
• onTop (func): optional, function executed when a card is dragged above the stack
• onRight (func): optional, function executed when a card is dragged to the right of the stack
• onBottom (func): optional, function executed when a card is dragged below the stack
• onLeft (func): optional, function executed when a card is dragged to the left of the stack
• onClick (func): optional, function execeuted when a card is grabbed, but not moved beyond clickBound
• topLimit (int): optional, number of pixels a card is limited in movement to ont the top
• rightLimit (int): optional, number of pixels a card is limited in movement to on the right
• bottomLimit (int): optional, number of pixels a card is limited in movement to on the bottom
• leftLimit (int): optional, number of pixels a card is limited in movement to on the left

Card - A single slide of information in your stack of cards

• className (str): optional, provide a custom className for the Card (not held)
• grabbedClassName (str): optional, provide a custom className for the Card (when held)
• children (obj, arr): the children to be rendered inside the Card
• data (obj): optional, data to be sent to on[Direction] callback functions on the CardStack
• undraggable (bool): optional, make a card undraggable (great for end of stack)
• animate (Map): optional, map of 'css attribute' => fn(x, y) where x and y are the position of the card relative to its starting position, and the return of fn is the value of the css attribute
• animateThrottle (int): number of ms to throttle animation calls by (default 50ms)
• animationHook (func): optional, function to be called on each animation frame (limited to animateThrottle) it will receieve 2 parameters x and y position of the card relative to its starting position

The on[Direction] callback functions on the CardStack will receive a parameter of the data object on each Card, and a second parameter that is the number of pixels the card was dragged from its middle

By default the card will not drag if a button or anchor is clicked and held.

CardButton - An unstyled button to take actions on the card, or to hook into the currently viewed card

• className (str): optional, provide a custom className for the CardButton
• style (obj): optional, provide custom in-line styling for the CardButton
• onClick (str/func): required, provide a hook for the click event. If strings: 'top', 'right', 'bottom', or 'left' are provided instead of a function, the corresponding callback on the CardStack will be called

Example Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Card, CardStack } from 'og-react-swipe';

class App extends Component {
    constructor(props) {
        super(props);

        this.leftDrag = this.leftDrag.bind(this);
        this.rightDrag = this.rightDrag.bind(this);
        this.onRunOut = this.onRunOut.bind(this);

        // utility functions
        this.round = Math.round;
        this.random = Math.random;
        this.abs = Math.abs;
    }

    render() {
        let cards = [];

        for (let i = 0; i < 10; i++) {
            let color = 'rgb(' +
                this.round(this.random() * 255) + ','	+
                this.round(this.random() * 255) + ','	+
                this.round(this.random() * 255) + ')';

            let animate = new Map([
                [
                    'opacity',
                    (x, y) => {
                        x = this.abs(x);
                        
                        if (x > 100) x = 100;

                        return (120 - x) / 120;
                    }
                ]
            ]);

            cards.push(
                <Card key={ i } data={{ card_num: i }} undraggable={ i == 9 }
                    animate={ animate } animateThrottle={ 20 }>
                    <div style={{
                        backgroundColor: color,
                        width: '100%',
                        height: '200px',
                    }} />
                </Card>
            );
        }

        return (
            <div className="app" style={{ overflow: 'hidden' }}>
                <CardStack style={{ width: '200px', margin: '100px auto' }}
                    diff={ 100 }
                    onRunOut={ this.onRunOut }
                    onLeft={ this.leftDrag }
                    onRight={ this.rightDrag }
                    onClick={ this.click }
                    clickBount={ 3 }
                    limit={ 120 }
                    bottomLimit={ 40 }>
                    { cards }
                </CardStack>
            </div>
        );
    }

    leftDrag(data, amount) {
        console.log('Dragged left: ', amount);
        console.log(data);
    }

    rightDrag(data, amount) {
        console.log('Dragged right: ', amount);
        console.log(data);
    }

    click(data, amount) {
        console.log('Click!');
        console.log(data);
    }

    onRunOut() {
        console.log('No more cards left!');
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

Planned Features

• non-draggable elements: selectors for elements that should not drag, right now defaults to buttons and anchor tags
• dropHook: function that hooks into the drop action, and will receieve a callback to delete the card