# @splidejs/react-splide

> The React component for Splide.

Latest version **0.7.12** (published 2022-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @splidejs/react-splide
pnpm add @splidejs/react-splide
yarn add @splidejs/react-splide
bun add @splidejs/react-splide
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.12 |
| Published | 2022-09-30 |
| First published | 2020-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 229.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 264 |
| Author | Naotoshi Fujita |
| Maintainers | splidejs |
| Keywords | splide, slider, carousel, slideshow, lightweight, touch, responsive, react |

## Links

- npm: https://www.npmjs.com/package/@splidejs/react-splide
- Repository: https://github.com/Splidejs/react-splide
- Homepage: https://github.com/Splidejs/react-splide#readme
- Issues: https://github.com/Splidejs/react-splide/issues
- npm.io page: https://npm.io/package/@splidejs/react-splide

## Dependencies (1)

- [@splidejs/splide](https://npm.io/package/@splidejs/splide.md) ^4.1.3

## 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

- 0.7.12 (latest) — 2022-09-30
- 0.7.11 — 2022-09-20
- 0.7.10 — 2022-09-06
- 0.7.9 — 2022-09-06
- 0.7.8 — 2022-06-11
- 0.7.7 — 2022-05-28
- 0.7.6 — 2022-05-26
- 0.7.5 — 2022-04-11
- 0.7.4 — 2022-04-10
- 0.7.3 — 2022-04-06
- 0.7.2 — 2022-04-05
- 0.7.1 — 2022-04-05
- 0.7.0 — 2022-04-05
- 0.6.20 — 2022-01-26
- 0.6.19 — 2022-01-19
- … 33 more at https://npm.io/package/@splidejs/react-splide/versions

## README

<div align="center">
  <a href="https://splidejs.com" target="_blank">
      <img width="70" src="images/logo.svg">
  </a>
  <a href="https://reactjs.org/" target="_blank">
      <img width="70" src="images/react-logo.svg">
  </a>

  <h1>React Splide</h1>

  <p>
    React Splide is the React component for the
    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
  </p>

  <p>
    <a href="https://splidejs.com/integration/react-splide/">Getting Started</a>
    <br>
    <a href="https://splidejs.com/">Demo</a>
    <br>
    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
  </p>
</div>

## Quick Start
Get the latest version from NPM:
```
$ npm install @splidejs/react-splide
```

Import CSS and components:

```jsx
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';

export function Slider() {
  return (
    <Splide options={ { rewind: true } } aria-label="React Splide Example">
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
    </Splide>
  );
}
```

Visit [here](https://splidejs.com/integration/react-splide/) for more details.


## Support Splide

Please support the project if you like it!
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)


## License
React Splide and Splide are released under the MIT license.
© 2021 Naotoshi Fujita

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