react-als-h5 v1.1.2

react-als-h5

react-als-h5 is a flexible react component that lets you build custom interactive cards that can be swipeable.

Getting Started

Installing

npm i react-als-h5 --save

Usage

Example

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Card, CardWrapper } from 'react-als-h5';

class Example extends Component {
    return(
      <CardWrapper>
        <Card>
          Hello World!
        </Card>
      </CardWrapper>
    );
  }
}

Components

CardWrapper

Is the container of all the cards that are going to be displayed.

Optional Props:

Adding a end card

import React, { Component  } from 'react'
import { render  } from 'react-dom'
import { Card, CardWrapper } from 'react-als-h5';

// Create custom end card
class MyEndCard extends Component {
  render() {
    return(
      <div>You Finished Swiping!</div>
    );
  }
}

// Pass your end card to the card wrapper
class Example extends Component {
  getEndCard() {
    return(
      <MyEndCard/>
    );
  }
  
  render() {
    return(
      <CardWrapper addEndCard={this.getEndCard.bind(this)}>
        <Card>First</Card>
        <Card>Second</Card>
      </CardWrapper>
    );
  }
}

Card

Card that is going to be displayed inside the CardWrapper.

Optional Props:

Examples

Swipe and Tap listeners

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Card, CardWrapper } from 'react-als-h5';

class Example extends Component {

  onSwipe(data) {
    console.log("I was swiped.");
  }

  onSwipeLeft(data) {
    console.log("I was swiped left.");
  }

  onSwipeRight(data) {
    console.log("I was swiped right.");
  }

  onDoubleTap(data) {
    console.log("I was double tapped.");
  }

  renderCards() {
    let data = ["first", "second", "third"];
    return data.map((d) => {
      return(
        <Card
          key={d}
          onSwipe={this.onSwipe.bind(this)}
          onSwipeLeft={this.onSwipeLeft.bind(this)}
          onSwipeRight={this.onSwipeRight.bind(this)}
          onDoubleTap={this.onDoubleTap.bind(this)}>
            Hello World!
        </Card>
      );
    });
  }
  
  render() {
    return(
      <CardWrapper>
        {this.renderCards()}
      </CardWrapper>
    );
  }
}

Passing data to a card

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Card, CardWrapper } from 'react-als-h5';

class Example extends Component {
  onSwipe(data) {
    console.log(data.name + " was swiped.");
  }

  renderCards() {
    let data = [{id: 1, name: "First"},{id: 2, name: "Second"}];
    return data.map((d) => {
      return(
        <Card
          key={d.id}
          onSwipe={this.onSwipe.bind(this)}
          data={d}>
            {d.name}
        </Card>
      );
    });
  }

  render() {
    return(
      <CardWrapper>
        {this.renderCards()}
      </CardWrapper>
    );
  }
}

Custom styles

You can change the style of the Card and CardWrapper passing the style prop.

Using custom styles example

import React, {Component} from 'react'
import {render} from 'react-dom'
import { Card, CardWrapper } from 'react-als-h5';

class Example extends Component {
  render() {
    const wrapperStyle = {
      backgroundColor: "#024773"
    }
    
    const cardStyle = {
      backgroundColor: "#059FFF"
    }
    return(
      <CardWrapper style={wrapperStyle}>
        <Card style={cardStyle}>
          First
        </Card>
      </CardWrapper>
    );
  }
}

License

MIT ©