React-views-swiper NPM

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

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