# react-tiga-swiper

> 一个轻巧、好用的react swiper组件

Latest version **1.0.10** (published 2021-04-12) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2021-04-12 |
| First published | 2021-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 87.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | xigua1994 |
| Maintainers | xigua1994 |

## Links

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

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.11
- [use-timeout-mock-interval](https://npm.io/package/use-timeout-mock-interval.md) ^1.0.0

## Recent versions

- 1.0.10 (latest) — 2021-04-12
- 1.0.9 — 2021-04-12
- 1.0.8 — 2021-02-25
- 1.0.7 — 2021-02-21
- 1.0.6 — 2021-02-18
- 1.0.5 — 2021-02-16
- 1.0.4 — 2021-02-04
- 1.0.3 — 2021-02-01
- 1.0.2 — 2021-01-31
- 1.0.1 — 2021-01-13
- 1.0.0 — 2021-01-10

## README

# react-tiga-swiper

> a fantastic react swiper component

[![NPM](https://img.shields.io/npm/v/react-tiga-swiper.svg)](https://www.npmjs.com/package/react-tiga-swiper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<p align="center">
  🇨🇳 <a href="https://github.com/xigua1994/react-tiga-swiper/blob/master/README.zh-cn.md">中文版介绍</a>
</p>

## Install

```bash
npm install --save react-tiga-swiper
```

## Usage

```tsx
import React, { useRef, useState } from "react";
import Swiper,{SwipeRef} from 'react-tiga-swiper';
import 'react-tiga-swiper/dist/index.css';

function App() {
  const swiperRef = useRef<SwipeRef>(null);
  const [index, setIndex] = useState<any>();
  const swiperData = ["#99CCCC", "#FFCC99", "#FFCCCC", "#FFFFCC","#CCFFFF"];

  const swipeTo = () => {
    const swiperInstance = swiperRef.current;
    const currPage: string = index * 1 + '';
    swiperInstance?.swipeTo(parseInt(currPage, 10));
  };

  const prev = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.prev();
  };

  const next = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.next();
  };

  const onChange = (currPage: number, prevPage: number) => {
    console.log(currPage, prevPage);
  };

  return (
    <>
      <div style={{ marginBottom: 20 }}>
        <div className="manu-action">
          <input
            type="number"
            value={index}
            onChange={(e) => setIndex(e.target.value)}
          />
          <span className="btn" onClick={swipeTo}>swipe to (index start 0)</span>
        </div>
        <div className="more-action">
          <span className="btn" onClick={prev}>prev</span>
          <span className="btn" onClick={next}>next</span>
        </div>
      </div>
      <Swiper
        className="demo-swiper-container"
        autoPlay={3000}
        selectedIndex={0}
        showIndicators={true}
        indicator={null}
        dots={null}
        direction="vertical"
        loop={false}
        ref={swiperRef}
        onChange={onChange}
      >
        {swiperData.map((item: string, key) => (
          <div key={key} style={{backgroundColor: item}}>{key + 1}</div>
        ))}
      </Swiper>
    </>
  );
}

```

## API

| attribute               | desc                       | type                                  | default     | others                                          |
| ------------------ | -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------- |
| `duration`  | Animation duration(ms)       | `number`   | `300`      |   |
| `autoPlay`   | Autoplay interval(ms)       | `number`  | `3000`     |     |
| `selectedIndex` | index of initial swiper, start from 0 | `number` |  `0` | |
| `direction`   | scroll direction          | `string`  | `horizontal | 'vertical`     |     |
| `loop`   | whether to enable loop       | `bool`           | `true`     |  |
| `touchable`   | whether to enable touchable       | `bool`           | `true`     |  |
| `showIndicators`   | whether to enable show indicators  | `bool` | `true` |  |
| `showDots`    | whether to enable show dots           | `bool`     | `true` | |
| `dots`   | bottom dots  | `React.ReactNode`    | `null`    |   |
| `indicator`   | indicator   | `React.ReactNode`    | `null`    |   |
| `style`     | style   |  `React.CSSProperties` | `{}`    |        |
| `className`   | className  | `string`   | `''`       |    |
| `onChange`  | emitted when currage swipe changed | `(current: number, prev: number): void` | `noop`   |   |

## Swipe Methods

| methods  | desc               | argument | desc                       |
| ------- | ------------------ | ------ | ------------------------------ |
| `swipeTo` | swipe to target index     | `index`  | start 0 |
| `prev`    | swipe to prev item |        |                                |
| `next`    | swipe to next item |        |                                |
## License

MIT © [xigua1994](https://github.com/xigua1994)

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