Add optional arrow prop to ScrollingCarousel.

.gitignore

@@ -12,4 +12,6 @@ website/node_modules
 website/i18n/*
 
 dist/
-coverage
+coverage
+
+.idea

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.7-beta.3",
+	"version": "1.2.0-beta.1",
 	"description": "Lightweight carousel component for react",
 	"main": "dist/cjs/index.js",
 	"module": "dist/es/index.js",
@@ -65,7 +65,7 @@
 		"tslint": "^6.1.0",
 		"tslint-plugin-prettier": "^2.3.0",
 		"tslint-react-hooks": "^2.2.2",
-		"typescript": "^3.8.3"
+		"typescript": "4.2.3"
 	},
 	"sideEffects": false,
 	"browserslist": {

src/components/scrolling-carousel/index.tsx

@@ -3,7 +3,7 @@ import React, {
 	MouseEvent,
 	useState,
 	useRef,
-	useCallback,
+	useCallback, ReactElement,
 } from 'react';
 import { Item, SlideDirection } from '../../types/carousel';
 import styles from '../../styles/slider/styles.module.css';
@@ -12,6 +12,8 @@ import { getOuterWidth } from '../../helpers';
 export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
 	children,
 	className,
+	leftIcon,
+	rightIcon
 }: SliderProps) => {
 	const slider = useRef<HTMLDivElement>(null);
 	const [isDown, setIsDown] = useState(false);
@@ -119,17 +121,21 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
 		slider.current!.scrollLeft = amount;
 	};
 
+	const getArrow = (direction: SlideDirection, data: string, element?: ReactElement) => {
+		return (
+			<div data-arrow={data} onClick={() => slide(direction)}>
+				{element ?? <button />}
+			</div>
+		)
+	};
+
 	return (
 		<div className={`${styles.sliderBase} ${className}`}>
 			{showArrow.left && (
-				<div data-arrow="left">
+				getArrow(SlideDirection.Right, "left", leftIcon)
-					<button onClick={() => slide(SlideDirection.Right)} />
-				</div>
 			)}
 			{showArrow.right && (
-				<div data-arrow="right">
+				getArrow(SlideDirection.Left, "right", rightIcon)
-					<button onClick={() => slide(SlideDirection.Left)} />
-				</div>
 			)}
 			<div
 				ref={ref}
@@ -148,6 +154,8 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
 export interface SliderProps {
 	children: Item[];
 	className?: string;
+	leftIcon?: ReactElement;
+	rightIcon?: ReactElement;
 }
 
 export type Arrows = {