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