Merge pull request #41 from erichbehrens/feature/on-slide-change

Feature/on slide change

README.md

@@ -77,14 +77,20 @@ Disable slider navigation through touch events
 
 Minimum distance to swipe for triggering a navigation event
 
-**previousButton** - `ReactElement`, default  `string "previous"`
+**previousButton** - `ReactElement`, default is an arrow svg
 
 Will be rendered inside the previous button
 
-**nextButton** - `ReactElement`, default `string "next"`
+**nextButton** - `ReactElement`, default is an arrow svg
 
 Will be rendered inside the next button
 
+**onSlideChange** - `function`, called after the current slide has changed; receives an object with the new slide index as argument:
+
+```js
+<Slider onSlideChange={event => console.log(event.slideIndex)>
+```
+
 **classNames** `object`, default
 
 ```js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-slider",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Animated slider component for react",
   "main": "build/index.js",
   "scripts": {

src/index.js

@@ -83,6 +83,9 @@ class Slider extends React.PureComponent {
 			animation: undefined,
 		});
 		this.setupAutoplay();
+		if (typeof this.props.onSlideChange === 'function') {
+			this.props.onSlideChange({ slideIndex: this.nextSlideIndex });
+		}
 	};
 
 	isDisabled = () =>

src/index.test.js

@@ -117,6 +117,15 @@ test('test autoslide disabled', () => {
 	expect(initialSnapshot).toEqual(slider.toJSON());
 });
 
+test('onSlideChange should be called with new slide index', () => {
+	const callback = jest.fn();
+	const slider = ReactTestRenderer.create(<Slider onSlideChange={callback}><div /><div /></Slider>);
+	slider.getInstance().next();
+	jest.runAllTimers();
+	expect(callback.mock.calls.length).toBe(1);
+	expect(callback.mock.calls[0][0]).toHaveProperty('slideIndex', 1);
+});
+
 test('test autoslide enabled', () => {
 	const autoplay = 2000;
 	const slider = ReactTestRenderer.create(<Slider autoplay={autoplay}><div /><div /></Slider>);