diff --git a/__tests__/carousel.spec.tsx b/__tests__/carousel.spec.tsx
index 84232d7..30b1505 100644
--- a/__tests__/carousel.spec.tsx
+++ b/__tests__/carousel.spec.tsx
@@ -329,4 +329,18 @@ describe('', () => {
expect(paginationCallback).toHaveBeenCalledTimes(1);
expect(mockUsePrevious).toBeCalled();
});
+
+ it('should render custom arrows when prop is passed', async () => {
+ const { container } = render(
+ }
+ rightArrow={
}
+ children={carouselItemNodes(6)}
+ />,
+ );
+
+ expect(container.getElementsByClassName("left-arrow")[0]).toBeTruthy();
+ expect(container.getElementsByClassName("right-arrow")[0]).toBeTruthy();
+ });
});
diff --git a/package.json b/package.json
index acd6173..877c9eb 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/arrow/index.tsx b/src/components/arrow/index.tsx
index aab5b11..c81ee39 100644
--- a/src/components/arrow/index.tsx
+++ b/src/components/arrow/index.tsx
@@ -9,6 +9,6 @@ export const Arrow: FunctionComponent = (props: ArrowProps) => (
/>
);
export interface ArrowProps {
- onClick: (...args: any) => any;
+ onClick?: (...args: any) => any;
direction: string;
}
diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts
index 6088744..0e4828e 100644
--- a/src/components/carousel/defaultProps.ts
+++ b/src/components/carousel/defaultProps.ts
@@ -15,4 +15,6 @@ export const defaultProps: Required = {
dynamic: false,
paginationCallback: null,
pageCount: 0,
+ rightArrow: null,
+ leftArrow: null
};
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index 623c649..8a1e940 100644
--- a/src/components/carousel/index.tsx
+++ b/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 = (userProps: CarouselPr
className={`${styles.carouselBase} ${props.className}`}
>
{showArrow.left && (
- slide(SlideDirection.Left)} />
+ slide(SlideDirection.Left)}>
+ {props.leftArrow ??
}
+
)}
= (userProps: CarouselPr
widthCallBack={widthCallBack}
/>
{showArrow.right && (
- slide(SlideDirection.Right)} />
+ slide(SlideDirection.Right)}>
+ {props.rightArrow ??
}
+
)}
);
@@ -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 {