Merge pull request #35 from yavuzkoca/custom-arrows

add custom arrows when its given from the props

__tests__/carousel.spec.tsx

@@ -329,4 +329,18 @@ describe('<Carousel />', () => {
 		expect(paginationCallback).toHaveBeenCalledTimes(1);
 		expect(mockUsePrevious).toBeCalled();
 	});
+
+	it('should render custom arrows when prop is passed', async () => {
+		const { container } = render(
+			<Carousel
+				{...defaultProps}
+				leftArrow={<div className="left-arrow"/>}
+				rightArrow={<div className="right-arrow"/>}
+				children={carouselItemNodes(6)}
+			/>,
+		);
+
+		expect(container.getElementsByClassName("left-arrow")[0]).toBeTruthy();
+		expect(container.getElementsByClassName("right-arrow")[0]).toBeTruthy();
+	});
 });

package.json

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

src/components/arrow/index.tsx

@@ -9,6 +9,6 @@ export const Arrow: FunctionComponent<ArrowProps> = (props: ArrowProps) => (
 	/>
 );
 export interface ArrowProps {
-	onClick: (...args: any) => any;
+	onClick?: (...args: any) => any;
 	direction: string;
 }

src/components/carousel/defaultProps.ts

@@ -15,4 +15,6 @@ export const defaultProps: Required<CarouselProps> = {
 	dynamic: false,
 	paginationCallback: null,
 	pageCount: 0,
+	rightArrow: null,
+	leftArrow: null
 };

src/components/carousel/index.tsx

@@ -4,6 +4,7 @@ import React, {
 	KeyboardEvent,
 	useEffect,
 	useRef,
+	ReactElement,
 } from 'react';
 import { Arrow } from '../arrow';
 import { ItemProvider } from '../item';
@@ -168,7 +169,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			className={`${styles.carouselBase} ${props.className}`}
 		>
 			{showArrow.left && (
-				<Arrow direction="left" onClick={() => slide(SlideDirection.Left)} />
+				<div onClick={() => slide(SlideDirection.Left)}>
+					{props.leftArrow ?? <Arrow direction="left" />}
+				</div>
 			)}
 			<ItemProvider
 				{...props}
@@ -180,7 +183,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				widthCallBack={widthCallBack}
 			/>
 			{showArrow.right && (
-				<Arrow direction="right" onClick={() => slide(SlideDirection.Right)} />
+				<div onClick={() => slide(SlideDirection.Right)}>
+					{props.rightArrow ?? <Arrow direction="right" />}
+				</div>
 			)}
 		</div>
 	);
@@ -201,6 +206,8 @@ export interface CarouselProps {
 	dynamic?: boolean;
 	paginationCallback?: ((direction: SlideDirection) => any) | null;
 	pageCount?: number;
+	leftArrow?: ReactElement | null;
+	rightArrow?: ReactElement | null;
 }
 
 export interface CarouselState {