Add optional arrow prop to ScrollingCarousel.

.gitignore

@@ -13,3 +13,5 @@ website/i18n/*
 
 dist/
 coverage
+
+.idea

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendyol-js/react-carousel",
-	"version": "1.0.7-beta.2",
+  "version": "1.2.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1467,9 +1467,9 @@
       }
     },
     "caniuse-lite": {
-			"version": "1.0.30001039",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001039.tgz",
-			"integrity": "sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==",
+      "version": "1.0.30001243",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
+      "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
       "dev": true
     },
     "capture-exit": {
@@ -8875,9 +8875,9 @@
       }
     },
     "typescript": {
-			"version": "3.8.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-			"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
+      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
       "dev": true
     },
     "unicode-canonical-property-names-ecmascript": {

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">
-					<button onClick={() => slide(SlideDirection.Right)} />
-				</div>
+				getArrow(SlideDirection.Right, "left", leftIcon)
 			)}
 			{showArrow.right && (
-				<div data-arrow="right">
-					<button onClick={() => slide(SlideDirection.Left)} />
-				</div>
+				getArrow(SlideDirection.Left, "right", rightIcon)
 			)}
 			<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 = {