react-views-swiper
TypeScript icon, indicating that this package has built-in type declarations

1.1.9 • Public • Published

React-Views-Swiper

React-Views-Swiper, inspired by React-Swipeable-Views, is a small react library to provide a component to slide and swipe between different views by touch or mouse.

Documentation

Installation

npm i react-swipeable-views

or

yarn add react-swipeable-views

Examples

Basic Example

    import { Swiper } from "../package/react-views-swiper";

    <Swiper>
        <div style={styles.view1}>View 1</div>
        <div style={styles.view2}>View 2</div>
        <div style={styles.view3}>View 3</div>
    </Swiper>

Note: Further examples with a live demo will be provied in the next update.

API

Name Type Default Description
children node - The property to provide the content for the slides
containerStyle object {} This prop is the inline-style for the container component, in which all views will be rendered
index number 0 This property is the index for the view, which will be displayed. You can pass once the index to show a different view as the first view or to control the views by external events for example tabs or buttons
onChangeIndex function - The onIndexChanged property is a callback which wll be invoked, if the index of the current displayed view is changed
onChangeView function - The onChangeView property is a callback which wll be invoked, if the current view has changed, independently by swipe or anything else
renderOnlyActive bool false If true, the component will render only the current active view. Any other view will only rendered, if the index is changed to the regarding view index
resistance bool false If true, the bouncing effect will be avoided when swiping by touch

Package Sidebar

Install

npm i react-views-swiper

Weekly Downloads

1

Version

1.1.9

License

ISC

Unpacked Size

48.7 kB

Total Files

56

Last publish

Collaborators

  • kevvko