add slideChangeHooks for before and after changes

__tests__/carousel.spec.tsx

@@ -4,6 +4,7 @@ import { Carousel } from '../src/components/carousel';
 import { defaultProps } from '../src/components/carousel/defaultProps';
 import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
 import * as helpers from '../src/helpers';
+import { SlideDirection } from '../src/types/carousel';
 
 describe('<Carousel />', () => {
 	let mockGetPageX: jest.SpyInstance<
@@ -301,4 +302,52 @@ describe('<Carousel />', () => {
 
 		expect(button!.innerHTML).toEqual('1');
 	});
+
+	it('should invoke beforeChange when beforeChange prop is defined on slide', async () => {
+		const onBeforeChange = (direction: SlideDirection) => {
+			console.log(direction);
+		};
+		const stub = jest.fn(onBeforeChange);
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+				beforeChange={stub}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(stub).toHaveBeenCalledTimes(1);
+	});
+
+	it('should invoke afterChange when afterChange prop is defined on slide', async () => {
+		const onAfterChange = (direction: SlideDirection) => {
+			console.log(direction);
+		};
+		const stub = jest.fn(onAfterChange);
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+				afterChange={stub}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(stub).toHaveBeenCalledTimes(1);
+	});
 });

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.0",
+	"version": "1.0.7-beta.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.7-beta.1",
+	"version": "1.0.7-beta.2",
 	"description": "Lightweight carousel component for react",
 	"main": "dist/cjs/index.js",
 	"module": "dist/es/index.js",

src/components/carousel/defaultProps.ts

@@ -13,4 +13,6 @@ export const defaultProps: Required<CarouselProps> = {
 	useArrowKeys: false,
 	a11y: {},
 	dynamic: false,
+	beforeChange: null,
+	afterChange: null,
 };

src/components/carousel/index.tsx

@@ -51,6 +51,8 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			return;
 		}
 
+		if (props.beforeChange) props.beforeChange(direction);
+
 		const next = getCurrent(current, slide, props.children.length, direction);
 		const rotated = props.infinite
 			? rotateItems(props.children, items, next, props.show, slide, direction)
@@ -78,6 +80,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				transition: 0,
 				isSliding: false,
 			});
+			if (props.afterChange) props.afterChange(direction);
 		}, props.transition * 1_0_0_0);
 	};
 
@@ -162,6 +165,8 @@ export interface CarouselProps {
 	useArrowKeys?: boolean;
 	a11y?: { [key: string]: string };
 	dynamic?: boolean;
+	beforeChange?: ((direction: SlideDirection) => void) | null;
+	afterChange?: ((direction: SlideDirection) => void) | null;
 }
 
 export interface CarouselState {