0.14.0 • Published 4 years ago

react-swipeable-views-utils v0.14.0

Weekly downloads
236,066
License
MIT
Repository
github
Last release
4 years ago

react-swipeable-views

A React component for swipeable views.

PackageVersionDownloadSize (kB gzipped)
react-swipeable-viewsnpm versionnpm downloads5.08
react-swipeable-views-utilsnpm versionnpm downloads3.52
react-swipeable-views-nativenpm versionnpm downloads?

Build Status Dependencies DevDependencies Donate TypeScript definitions on DefinitelyTyped Coverage Status

Installation

Browser

npm install --save react-swipeable-views

Native (experimental)

npm install --save react-swipeable-views-native

The problem solved

Check out the demos from a mobile device (real or emulated). It's tiny (<10 kB gzipped), it quickly renders the first slide, then lazy-loads the others.

Simple example

usage

Browser

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

export default MyComponent;

Native (experimental)

react-native support is experimental and I have no plan pushing it forward. I start to think that lower level abstraction to share the implementation between the platforms are more appropriate. We have two different implementations of the react-swipeable-views API.

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import SwipeableViews from 'react-swipeable-views-native';
// There is another version using the scroll component instead of animated.
// I'm unsure which one give the best UX. Please give us some feedback.
// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';

const styles = StyleSheet.create({
  slideContainer: {
    height: 100,
  },
  slide: {
    padding: 15,
    height: 100,
  },
  slide1: {
    backgroundColor: '#FEA900',
  },
  slide2: {
    backgroundColor: '#B3DC4A',
  },
  slide3: {
    backgroundColor: '#6AC0FF',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

const MyComponent = () => (
  <SwipeableViews style={styles.slideContainer}>
    <View style={[styles.slide, styles.slide1]}>
      <Text style={styles.text}>
        slide n°1
      </Text>
    </View>
    <View style={[styles.slide, styles.slide2]}>
      <Text style={styles.text}>
        slide n°2
      </Text>
    </View>
    <View style={[styles.slide, styles.slide3]}>
      <Text style={styles.text}>
        slide n°3
      </Text>
    </View>
  </SwipeableViews>
);

export default MyComponent;

Who's using react-swipeable-views?

License

This project is licensed under the terms of the MIT license.

doc4k_react_ui@everything-registry/sub-chunk-2616webstudio-muistonex-uithe-template@craftercms/studio-uijm-mrc-componentskekeesparcs-react-airbnb-carouseluikit_by_amirjaliliui-kit-v3ui.webhook.yunplus.io@backlight-dev/various-trouble-hjmth.bricks-l6ngliw7-fork-lgq24azv@backlight-dev/various-trouble-hjmth.bricks-lgq27cpj@backlight-dev/veil-steal-hej64.bricks-l7gtkkiy@backlight-dev/rapid-sweater-1n8dt.bricks-l3yzvl9g@backlight-dev/sillyleo.bricks-lccvkr2p@backlight-dev/soap-distribute-dux20.rjid@backlight-dev/setbrain.ink-forego-vnavb.bricks-l5gkcnmk@backlight-dev/power-drive-tgm7r.bricks-lo057i5n@backlight-dev/hdn-test.hdn-bricks@backlight-dev/human-apple-pfrt9.bricks-l0gqrlz3@backlight-dev/icky-boys-h9rid.bricks-lglce3zu@backlight-dev/another-one.bricks-2htydw13pkxg0gsvc@backlight-dev/cent-undress-o9ffc.bricks-l6ngliw7@bitspro/eventview-ui@byhuz/huz-ui-castor@claimini/ui-components@aceandtate/styled-ui@datatiger/react-swipeable-views@dexkit/dexappbuilder-viewer@didi-santa/didisam-modulesunc-react-creatorup-material-ui-next-datepicker@fintailui/react@hdriel/mui-simple@hedviginsurance/react-swipeable-views@huebert/react-swipeable-views@gdjiami/jm-mrc-components@gotamedia/fluffy@leuven2030/ui@levi-m/ide-kit@mahpooya/react-swipeable-views@nlabs/gothamjs@nlabs/material-ui-pickers@metahkg/web@merchantlabs/react-carousel@merchantlabs/ui@metapair/ui@mlabs.io/ui@komemichael/komecodes@randy.tarampi/jsx@rart/25d0661d@nuragic/react-swipeable-views@pagopa/pagopa-editorial-components@smart-link/core@scvl/react-storefront@rohanprasad/react-swipeable-views@robrkerr/react-swipeable-viewsmui-simplemetahkg-webreact-airbnb-carouselreact-1appreact-1app-forkedsdk-motorv3pwa-storefrontpotanica-componentsradman-kitqubryx-react-componentreact-swipeable-views-newreact-swipeable-views-vertical-modifiedreact-swipeable-viewsreact-swipeable-views-iss258react-swipeable-views-with-hooksreact-swipeable-views-workspacereact18-swipeable-viewsreact-storefrontreact-windy-uihb-react-swipeable-views-newlumen-cms-basematerial-ui-next-datepickermaterial-ui-next-pickersmcbbs-clientmcbbs-client-scriptslos-design-system@tecsinapse/carousel@valpunk/core@vito.falco/pagopa-editorial-components@xuhaojun/react-swipeable-views@stream7/react-swipeable-viewsgatsby-theme-coverflowgatsby-theme-spudnikfuse-react-appgatsby-theme-auth-appgatsby-theme-contentfuleskolare-uifinal-radman-kitfinal-radman-kit-maryfinal-radman-kittcf-react-ui
0.14.0

4 years ago

0.14.0-alpha.0

5 years ago

0.13.9

5 years ago

0.13.7

5 years ago

0.13.6

5 years ago

0.13.5

5 years ago

0.13.4

5 years ago

0.13.3

6 years ago

0.13.1

6 years ago

0.13.0

7 years ago

0.12.18

7 years ago

0.12.17

7 years ago

0.12.16

7 years ago

0.12.14

7 years ago

0.12.13

7 years ago

0.12.11

8 years ago

0.12.9

8 years ago

0.12.8

8 years ago

0.12.7

8 years ago

0.12.5

8 years ago

0.12.0

8 years ago

0.11.1

8 years ago

0.11.0

8 years ago

0.10.1

8 years ago

0.10.0

8 years ago

0.9.2

8 years ago

0.9.1

8 years ago

0.9.0

8 years ago