# react-views-swiper

> A library to swipe between multiple views per drag an mouse

Latest version **1.1.9** (published 2023-01-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-views-swiper
pnpm add react-views-swiper
yarn add react-views-swiper
bun add react-views-swiper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2023-01-26 |
| First published | 2022-12-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 47.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kevin Klein |
| Maintainers | kevvko |
| Keywords | react, mobile, touch, slider, carousel, swipe |

## Links

- npm: https://www.npmjs.com/package/react-views-swiper
- Repository: https://github.com/KevvKo/react-views-swiper
- Homepage: https://github.com/KevvKo/react-views-swiper#readme
- Issues: https://github.com/KevvKo/react-views-swiper/issues
- npm.io page: https://npm.io/package/react-views-swiper

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^18.1.0
- [webpack](https://npm.io/package/webpack.md) ^5.75.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.1.0
- [typescript](https://npm.io/package/typescript.md) ^4.9.4
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.20.5
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^5.0.1
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.26
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.1.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.20.2
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.18.6
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.19.6

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.1.9 (latest) — 2023-01-26
- 1.1.8 — 2023-01-26
- 1.1.7 — 2023-01-18
- 1.1.6 — 2023-01-14
- 1.1.5 — 2023-01-03
- 1.1.4 — 2022-12-31
- 1.1.3 — 2022-12-29
- 1.1.2 — 2022-12-29
- 1.1.1 — 2022-12-29
- 1.1.0 — 2022-12-29
- 1.0.7 — 2022-12-28
- 1.0.6 — 2022-12-28
- 1.0.5 — 2022-12-28
- 1.0.4 — 2022-12-28
- 1.0.3 — 2022-12-25
- … 3 more at https://npm.io/package/react-views-swiper/versions

## README

# React-Views-Swiper
React-Views-Swiper, inspired by [React-Swipeable-Views](https://github.com/oliviertassinari/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
```javascript
    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

---
_Source: https://npm.io/package/react-views-swiper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._