npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-slide-deck

v0.2.3

Published

react slide deck, carousel, page scroll, swipe

Downloads

187

Readme

A simple react component for swipe, tabs, carousel, one page scroll ..., with animation hooks. tweening, tween callbacks. works on PC and touch devices


###NOTICES:

  • since 0.1.1, pass swipe prop to Deck only enable|disable swipe functionality, not including wheel control, which requires a seperated wheel prop
  • since 0.2.2, slide classNames for animation hooks are using cssModules, see below

npm i react-slide-deck --save


Demo

also open on touch device, see the swipe effect


For development

npm install
bower install
gulp dev
// then open localhost:3003

build

gulp build

Usage:


import React, { Component } from 'react';

import Deck from 'react-slide-deck';

import styles from './styles'; // your styles, css modules maybe?


class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {current: 0, horizontal: true, swipe: true, factor: 0.3, loop: true};
  }
  change(event) {
    let target = event.target;
    let index = Array.prototype.indexOf.call(target.parentElement.children, target);

    this.setState({
      current: index
    });
  }
  onSwitchStarted({prev: current, current: next}) {
    console.log(`started to switch from ${current} to ${next}`);
  }
  onSwitching(progress, deck) {
    console.log(`switching on progress.`);
    console.log(progress, deck.state.distance);
  }
  onSwitchDone({prev, current}) {
    console.log(`switch finished, current slide index: ${current}`);
  }
  render() {
    const slideClasses = {
      current: styles.currentSlide, // will be concat to className for current slide when it finished entering
      entering: styles.currentSlideEntering, // will be concat to className for current slide during its entering
      prev: styles.prevSlide, // ...
      leaving: styles.prevSlideLeaving, //...
      before: styles.before, //
      after: styles.after //
    };
    return (
      <div>
        <Deck {...this.state} onSwitching={::this.onSwitching} onSwitchDone={::this.onSwitchDone} slideClasses={slideClasses}>
          <Deck.Slide className='bg-black'>
          1
          </Deck.Slide>
          <Deck.Slide className='bg-green'>
          2
          </Deck.Slide>
          <Deck.Slide className='bg-red'>
          3
          </Deck.Slide>
          <Deck.Slide className='bg-yellow'>
          4
          </Deck.Slide>
        </Deck>
        <ul className='indicators' onClick={::this.change}>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    );
  }
}

<Deck
  className // you may need to set you deck's width, height,...
  current // current slide index
  horizontal // boolean, direction for the slides. `vertical` is removed
  wheel // can be control by wheel or not
  swipe // can swipe or not for touch devices
  animate // boolean, should apply animation for indicator click switch or not, see demo link
  factor // swipe distance used to determine whether to swipe forward or abort on touch devices.
         // if (swipeDistance / width(or height for vertical)) > factor, then will switch to next slide, otherwise return to the current slide.
  loop //  scroll down on the last Deck.Slide => transition to the first Deck.Slide.(first => last as well). only work when `swipe` is set
  dura // duration for slide transition, optional. default is 1400ms
  easing // `function|string` tweening easing function for transition between slides. see detail below,
  onSwitching // function(progress, deck) /*fired on every tweening transition. `deck` is the component instance of Deck, useful for accessing data like deck.status, deck.state.distance ...*/
  onSwitchDone // function({prev, current}) /*fired when slide transition is finished*/
  onSwitchStarted // function({prev:current, current:next}) /*fired before a tween transition started*/
  slideClasses // optional, Object, { current, prev, entering, leaving, before, after },
               // useful css class hook for Slide animation
            // current: applied to the `className` of current Slide when it entered
            // entering: applied to the `className` of current Slide if it is entering
            // prev: applied to the `className` of previous Slide when it left
            // leaving: applied to the `className` of previous Slide when it is leaving
            // before: applied to the `className` for Slides whose index < the index of current Slide
            // after: applied to the `className` for Slides whose index > the index of current Slide
  >
  <Deck.Slide> content </Deck.Slide>
  <Deck.Slide> content2 </Deck.Slide>
</Deck>

easing:

  • function(currentTime/duration) a function used to do the tweening easing effect, take one argument
  • string, name of built in easing function. see src/ease.js for details

Note.

  • it doesn't provide the slide indicators(usually for slides navigation), because it's hard to meet all needs.

  • if you need slide indicators, do what you want, just provide the current slide index to <Deck current={current}>, it will take care of the transition