Add ArrowLeft and ArrowRight props

Author: desko27

doc-components/CustomArrowLeft.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+
+const wrapperStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  zIndex: 1,
+  alignItems: 'center',
+  display: 'flex',
+  width: 'auto'
+}
+
+const buttonStyle = {
+  cursor: 'pointer',
+  border: 0,
+  background: 'transparent',
+  fontSize: 72,
+  padding: 15,
+  margin: 10
+}
+
+export default function CustomArrowLeft({onClick}) {
+  return (
+    <div style={wrapperStyle}>
+      <button onClick={onClick} style={buttonStyle}>
+        <span role="img" aria-label="Left">
+          👈
+        </span>
+      </button>
+    </div>
+  )
+}

pages/index.mdx

@@ -6,6 +6,7 @@ import Api from '../doc-components/Api'
 import DynamicContent from '../doc-components/DynamicContent'
 import Dots from '../doc-components/Dots'
 import Number from '../doc-components/Number'
+import CustomArrowLeft from '../doc-components/CustomArrowLeft'
 import '../src/index.scss'
 
 <ReactSlidy>
@@ -53,7 +54,7 @@ you could also load the CSS directly from HTML:
 ```
 
 ## Customization 👩‍🎨
-If you're using SASS, you could modify the next variables:
+If you're using SASS, you could modify the following variables:
 
 ```sass
 $react-slidy-c-background: transparent !default;
@@ -324,6 +325,15 @@ If you have slides with different heights you need to specify the maxHeight to b
 </div>
 ```
 
+#### Using custom arrows
+
+<ReactSlidy ArrowLeft={CustomArrowLeft}>
+  <img src="/1.jpg" />
+  <img src="/2.jpg" />
+  <img src="/3.jpg" />
+  <img src="/4.jpg" />
+</ReactSlidy>
+
 ## API 📖
 
 <Api />

src/index.js

@@ -12,6 +12,8 @@ const CLASSNAMES = {
 }
 
 const ReactSlidy = ({
+  ArrowLeft,
+  ArrowRight,
   children,
   classNameBase = 'react-Slidy',
   doAfterDestroy = noop,
@@ -86,6 +88,8 @@ const ReactSlidy = ({
     .join(' ')
 
   const reactSlidySliderProps = {
+    ArrowLeft,
+    ArrowRight,
     children,
     classNameBase,
     doAfterDestroy,
@@ -117,6 +121,10 @@ const ReactSlidy = ({
 }
 
 ReactSlidy.propTypes = {
+  /** Component to be used as the left arrow for the slider */
+  ArrowLeft: PropTypes.elementType,
+  /** Component to be used as the right arrow for the slider */
+  ArrowRight: PropTypes.elementType,
   /** Children to be used as slides for the slider */
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
   /** Class base to create all clases for elements. Styles might break if you modify it. */

src/react-slidy-slider.js

@@ -40,6 +40,8 @@ const renderItem = numOfSlides => (item, index) => {
 }
 
 export default function ReactSlidySlider({
+  ArrowLeft,
+  ArrowRight,
   children,
   classNameBase,
   doAfterDestroy,
@@ -134,24 +136,39 @@ export default function ReactSlidySlider({
   const handlePrev = e => slidyInstance.prev(e)
   const handleNext = e => items.length > numOfSlides && slidyInstance.next(e)
 
+  const renderLeftArrow = () => {
+    const disabled = index === 0
+    const props = {disabled, onClick: handlePrev}
+    if (ArrowLeft) return <ArrowLeft {...props} />
+    return (
+      <span
+        arial-label="Previous"
+        className={`${classNameBase}-prev`}
+        role="button"
+        {...props}
+      />
+    )
+  }
+  const renderRightArrow = () => {
+    const disabled = items.length <= numOfSlides || index === items.length - 1
+    const props = {disabled, onClick: handleNext}
+    if (ArrowRight) return <ArrowRight {...props} />
+    return (
+      <span
+        arial-label="Next"
+        className={`${classNameBase}-next`}
+        role="button"
+        {...props}
+      />
+    )
+  }
+
   return (
     <>
       {showArrows && (
         <>
-          <span
-            arial-label="Previous"
-            className={`${classNameBase}-prev`}
-            role="button"
-            disabled={index === 0}
-            onClick={handlePrev}
-          />
-          <span
-            arial-label="Next"
-            className={`${classNameBase}-next`}
-            disabled={items.length <= numOfSlides || index === items.length - 1}
-            role="button"
-            onClick={handleNext}
-          />
+          {renderLeftArrow()}
+          {renderRightArrow()}
         </>
       )}
       <div ref={sliderContainerDOMEl}>