# tiny-swiper-react

> ## spec - No dependency. (Only react) - Swiping can be used only on mobile.

Latest version **0.0.6** (published 2019-12-06) · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2019-12-06 |
| First published | 2019-12-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cruel32 |

## Links

- npm: https://www.npmjs.com/package/tiny-swiper-react
- npm.io page: https://npm.io/package/tiny-swiper-react

## Recent versions

- 0.0.6 (latest) — 2019-12-06
- 0.0.5 — 2019-12-05
- 0.0.4 — 2019-12-05
- 0.0.3 — 2019-12-05
- 0.0.2 — 2019-12-05
- 0.0.1 — 2019-12-04

## README

# Tiny Swiper React (need react v16+)

## spec
- No dependency. (Only react)
- Swiping can be used only on mobile.

## Get started
```js
import { TinySwiper } from './tiny-swiper-react'

const App = ()=>{
    const [ items ] = useState([
        <img src="/img1.jpg" alt="imag1" />,
        <img src="/img2.jpg" alt="imag2" />,
        <img src="/img3.jpg" alt="imag3" />,
        <div>jsx</div>
    ])

    const beforeTest = ({prevIndex, nextIndex})=>{
        console.log('beforeTest prevIndex : ', prevIndex)
        console.log('beforeTest nextIndex : ', nextIndex)
    }
    const afterTest = ({selectedIndex})=>{
        console.log('afterTest selectedIndex : ', selectedIndex)
    }
    const swipingTest = ({start, event,index})=>{
        console.log('swipingTest start : ', start)
        console.log('swipingTest event : ', event)
        console.log('swipingTest index : ', index)
    }
    
    return (
        <YourApp>
            <TinySwiper
                items={items}
                useIndicator={true}
                useDirector={true}
                indicatorClass={"override"}
                directorLeftClass={"override"}
                directorRightClass={"override"}
                before={beforeTest}
                after={afterTest}
                swiping={swipingTest}
            />
        </YourApp>
    )
}
```

## options

- items : Array

- useIndicator : Boolean

- useDirector : Boolean

- indicatorClass : String

- directorLeftClass : String

- directorRightClass : String

- before : Function({prevIndex:Number nextIndex:Number}). Before swping hook

- after : Function({currentIndex:Number}). After swping hook

- swiping : Function({
    start:{clientX:Number, clientY:Number},
    event:Event,
    index:Number,
}). Swping hook

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