# react-swiper-id

> A React component binding for Swiper

Latest version **1.0.3** (published 2017-06-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-06-13 |
| First published | 2017-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Parallel Digital Studio |
| Maintainers | sean-roberts |

## Links

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

## Dependencies (2)

- [swiper](https://npm.io/package/swiper.md) ^3.4.2
- [lodash.pickby](https://npm.io/package/lodash.pickby.md) ^4.6.0

## Recent versions

- 1.0.3 (latest) — 2017-06-13
- 1.0.2 — 2017-06-13
- 1.0.1 — 2017-06-13
- 1.0.0 — 2017-06-13

## README

react-swiper-id is a simple React component that wraps the excellent [Swiper](http://idangero.us/swiper/) tool from [iDangero.us](http://idangero.us)

# Installation #

`yarn add react-swiper-id` or `npm install react-swiper-id --save`

# Usage #


    import ReactSwiper from 'react-swiper-id'

    function MyComponent = () => (
      <div>
        <ReactSwiper loop next='.my-next-button'>
          <div>My First Slide</div>
          <div>My Second Slide</div>
          <div>My Third Slide</div>
        </ReactSwiper>

        <button className="my-next-button">Next</button>
      </div>
    )

### Props ###

`<ReactSwiper />` takes every single configuration option from the [Swiper API](http://idangero.us/swiper/api) as an optional prop.  Additionally, you can pass `containerClass` if you want to override the default container class name of `swiper-container`

### Accessing the Swiper instance ###

Use a ref and then access the `swiper` property of the component.

    import ReactSwiper from 'react-swiper-id'

    class MySwiper extends React.Component {
      componentWillReceiveProps(nextProps) {
        if (nextProps.destroySwiper) {
          this.mySwiper.swiper.destroy();
        }
      }

      render() {
        return (
          <ReactSwiper
            containerClass="something-else"
            ref={(s) => { this.mySwiper = s; }}
          >
            <div>My First Slide</div>
            <div>My Second Slide</div>
            <div>My Third Slide</div>
         </ReactSwiper>
      );
    )

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