# React Splide
**React Splide is the [Splide](https://github.com/Splidejs/splide) component for React.**
* [Document](https://splidejs.com/integration-react-splide/)
* [Splide Demos](https://splidejs.com/)
* [Working Examples](https://splidejs.github.io/react-splide/)
## Installation
Get the latest version by NPM:
```bash
$ npm install splide-nextjs/react-splide
```
## Usage
### Components
Import `Splide` and `SplideSlide` components:
```javascript
import { Splide, SplideSlide } from 'splide-nextjs/react-splide';
```
And render them like this:
```javascript
```
### CSS
Import [styles](https://splidejs.com/themes/) if you need.
```javascript
import 'splide-nextjs/splide/dist/css/themes/splide-default.min.css';
// or
import 'splide-nextjs/splide/dist/css/themes/splide-sea-green.min.css';
// or
import 'splide-nextjs/splide/dist/css/themes/splide-skyblue.min.css';
```
## Options
The `Splide` component accepts [options](https://splidejs.com/options/) as an object:
```javascript
```
## Listening to Events
You can listen to all [Splide events](https://splidejs.com/events/) through the `Splide` component. The callback function name is generated by the original event name, adding an "on" prefix, converted to the camelcase without colons. For example, "arrows:mounted" will be "onArrowsMounted".
```javascript
{ console.log( prev, next ) } }>
```
Note that the first argument is the splide instance, meaning original arguments are shifted by one.
## Examples
Here is a small example:
```javascript
import React from 'react';
import { Splide, SplideSlide } from 'splide-nextjs/react-splide';
export default () => {
return (
);
}
```
More examples:
* [Basic example](https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/BasicExample.jsx)
* [Autoplay](https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/AutoplayExample.jsx)
* [Thumbnails](https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/ThumbnailsExample.jsx)
* [Dynamic slides](https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/DynamicSlidesExample.jsx)
## License
React Splide and Splide are released under the MIT license.
© 2020 Naotoshi Fujita