React-swipe-to-reveal-options2 NPM

react-swipe-to-reveal-options2

Description

Installation

npm install --save react-swipe-to-reveal-options2

or

yarn add react-swipe-to-reveal-option2

Components

SwipeToRevealList

The SwipeToRevealList is a single component to provide a list of swipeable items. Example

const items = [
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Mathieu",
        callActionWhenSwipingFarLeft: true,
        callActionWhenSwipingFarRight: true
      },
];

const Example=()=>(
<SwipeToRevealList items={items} width={window.innerWidth}>
)

PropTypes

Name	Type	Default	Description
width	Number	window.InnerWidth	Width of list required
items	Array	[]	Array of SwipePropType

Swipeable

<Swipeable>

PropTypes

Name	Type	Default	Description
delta	Number	10
flickThreshold	Number	0.6
onSwiped	func	()=>{}	Action to perform on swiped
onSwipedDown	func	()=>{}	Action to perform when swiped down
onSwipedLeft	func	()=>{}	Action to perform when swiped left
onSwipedRight	func	()=>{}	Action to perform when swiped right
onSwipedUp	func	()=>{}	Action to perform on swiping up
onSwipingDown	func	()=>{}	Action to perform on swiping down
onSwipingLeft	func	()=>{}	Action to perform on swiping left
onSwipingRight	func	()=>{}	Action to perform on swiping right
onSwipingUp	func	()=>{}	Action to perform on swiping up

SwipeItem

Name	Type	Default	Description
disabled	Boolean	false	Disables item
onDoubleClick	func	()=>{})	Action on double click
onSingleTap	func	()=>{})	Action on single click
threshold	Number	45	Threshold

OptionType

Name	Type	Default	Description
label	String	''	label
class	String	''	label

SwipeItemPropType

Name	Type	Default
leftOptions	Array of OptionType	[]
rightOptions	Array of OptionType	[]
callActionWhenSwipingFarLeft	bool	{}
callActionWhenSwipingFarRight	bool	{}

Name	Type	Default	Description
width	Number	window.InnerWidth	Width of list required
items	Array	[]	Array of SwipePropType

SwipeToRevealOptions

Example

Controlled usage:

var SwipeToRevealOptions = require('react-swipe-to-reveal-options');

var App = React.createClass({
  render() {
    var items = [
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Mathieu",
        callActionWhenSwipingFarLeft: true,
        callActionWhenSwipingFarRight: true
      },
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Arseny",
        callActionWhenSwipingFarRight: true,
        callActionWhenSwipingFarLeft: false
      },
      {
        leftOptions: [{
          label: 'Trash',
          class: 'trash'
        }],
        rightOptions: [{
          label: 'Move',
          class: 'move',
        },{
          label: 'Archive',
          class: 'archive',
        }],
        content: "Mail from Bruno",
        callActionWhenSwipingFarRight: false,
        callActionWhenSwipingFarLeft: false
      }
    ];
    return (
      <div>
        items.map(function(item) {
          return (
            <SwipeToRevealOptions
              leftOptions={item.leftOptions}
              rightOptions={item.rightOptions}
              callActionWhenSwipingFarRight={item.callActionWhenSwipingFarRight}
              callActionWhenSwipingFarLeft={item.callActionWhenSwipingFarLeft}
            >
              {item.content}
            </SwipeToRevealOptions>
          );
        })
      </div>
    );
  },

});