Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-swipe

Package Overview
Dependencies
Maintainers
2
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-swipe

Brad Birdsall's Swipe.js as a React component

  • 6.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
decreased by-8.28%
Maintainers
2
Weekly downloads
 
Created
Source

react-swipe

build status npm version Download Count Buy Me A Coffee

Brad Birdsall's Swipe.js as a React component.

Demo

Check out the demo from a mobile device (real or emulated).

Install

npm install react swipe-js-iso react-swipe --save

Usage

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';

const Carousel = () => {
  let reactSwipeEl;

  return (
    <div>
      <ReactSwipe
        className="carousel"
        swipeOptions={{ continuous: false }}
        ref={el => (reactSwipeEl = el)}
      >
        <div>PANE 1</div>
        <div>PANE 2</div>
        <div>PANE 3</div>
      </ReactSwipe>
      <button onClick={() => reactSwipeEl.next()}>Next</button>
      <button onClick={() => reactSwipeEl.prev()}>Previous</button>
    </div>
  );
};

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

Props

  • swipeOptions: ?Object - supports all original options from Swipe.js config. If passed object differs from the previous one react-swipe will re-initiate underlying Swipe.js instance with fresh options

  • style: ?Object - object with 3 keys (see defaults):

    • container: ?Object
    • wrapper: ?Object
    • child: ?Object
  • regular props as className, id for root component are also supported

  • childCount: ?Number - use it to explicitely tell react-swipe that it needs to re-initiate underlying Swipe.js instance. For example, by setting the childCount prop to the length of the images array that you pass into react-swipe, re-rendering will take place when the images.length differs from the previous render pass:

<ReactSwipe childCount={images.length}>{images}</ReactSwipe>

Methods

Component proxies all Swipe.js instance methods.

Playground

Configure the ReactSwipe component in a sandbox environment at CodeSandbox.


MIT Licensed

Keywords

FAQs

Package last updated on 11 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc