Isolate arrow common styles

Author: desko27

doc-components/CustomArrowLeft.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+
+const buttonStyle = {
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  fontSize: 72,
+  height: '30%',
+  margin: 'auto 10px',
+  padding: 15
+}
+
+function CustomArrow({emoji, ...props}) {
+  return (
+    <button {...props} style={buttonStyle}>
+      <span role="img" aria-label="Arrow">
+        {emoji}
+      </span>
+    </button>
+  )
+}
+
+export function CustomArrowLeft(props) {
+  return <CustomArrow {...props} emoji="👈" />
+}
+
+export function CustomArrowRight(props) {
+  return <CustomArrow {...props} emoji="👉" />
+}

doc-components/CustomArrows.js

@@ -6,7 +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 {CustomArrowLeft, CustomArrowRight} from '../doc-components/CustomArrows'
 import '../src/index.scss'
 
 <ReactSlidy>
@@ -307,8 +307,8 @@ If you have slides with different heights you need to specify the maxHeight to b
 
 <div>
   <ReactSlidy imageObjectFit="contain">
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
   </ReactSlidy>
@@ -317,22 +317,59 @@ If you have slides with different heights you need to specify the maxHeight to b
 ```js showButton
 <div>
   <ReactSlidy imageObjectFit="contain">
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
-    <img style={{maxHeight: '300px'}}src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1873819.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/02/12/19402331/2108283.jpg" />
+    <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2018/03/26/19414824/2152752.jpg" />
     <img style={{maxHeight: '300px'}} src="https://d.fotocasa.es/promotion/2017/03/23/19298958/1982123.jpg" />
   </ReactSlidy>
 </div>
 ```
 
 #### Using custom arrows
 
-<ReactSlidy ArrowLeft={CustomArrowLeft}>
+<ReactSlidy ArrowLeft={CustomArrowLeft} ArrowRight={CustomArrowRight}>
+  <img src="/1.jpg" />
+  <img src="/2.jpg" />
+  <img src="/3.jpg" />
+  <img src="/4.jpg" />
+</ReactSlidy>
+
+```js showButton
+const buttonStyle = {
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  fontSize: 72,
+  height: '30%',
+  margin: 'auto 10px',
+  padding: 15
+}
+
+function CustomArrow({emoji, ...props}) {
+  return (
+    <button {...props} style={buttonStyle}>
+      <span role="img" aria-label="Arrow">
+        {emoji}
+      </span>
+    </button>
+  )
+}
+
+function CustomArrowLeft(props) {
+  return <CustomArrow {...props} emoji="👈" />
+}
+
+function CustomArrowRight(props) {
+  return <CustomArrow {...props} emoji="👉" />
+}
+
+<ReactSlidy ArrowLeft={CustomArrowLeft} ArrowRight={CustomArrowRight}>
   <img src="/1.jpg" />
   <img src="/2.jpg" />
   <img src="/3.jpg" />
   <img src="/4.jpg" />
 </ReactSlidy>
+```
 
 ## API 📖
 

pages/index.mdx

@@ -30,32 +30,43 @@ $react-slidy-mh: 50px !default;
   position: relative;
   user-select: none;
 
-  &-prev,
-  &-next {
+  &-arrow {
     align-items: center;
-    background: $react-slidy-c-nav-background;
     bottom: 0;
-    cursor: pointer;
     display: flex;
-    height: 20%;
-    justify-content: center;
     margin: auto 0;
-    min-height: 56px;
     opacity: 0;
     position: absolute;
     top: 0;
     transition: opacity 0.3s ease;
-    width: 40px;
+    width: auto;
     z-index: 1;
 
+    &Left {
+      left: 0;
+    }
+
+    &Right {
+      right: 0;
+    }
+
     @media screen and (max-width: 850px) {
       display: none;
     }
   }
 
+  &-prev,
+  &-next {
+    background: $react-slidy-c-nav-background;
+    cursor: pointer;
+    height: 20%;
+    justify-content: center;
+    min-height: 56px;
+    width: 40px;
+  }
+
   &-next {
     border-radius: 10px 0 0 10px;
-    right: 0;
 
     &::after {
       @include arrow('right');
@@ -64,7 +75,6 @@ $react-slidy-mh: 50px !default;
 
   &-prev {
     border-radius: 0 10px 10px 0;
-    left: 0;
 
     &::after {
       @include arrow('left');
@@ -90,11 +100,11 @@ $react-slidy-mh: 50px !default;
     object-fit: cover;
   }
 
-  &:hover > span {
+  &:hover > &-arrow {
     opacity: 1;
   }
 
-  &:hover > span[disabled] {
+  &:hover > &-arrow[disabled] {
     opacity: 0.2;
   }
 

src/index.scss

@@ -139,11 +139,13 @@ export default function ReactSlidySlider({
   const renderLeftArrow = () => {
     const disabled = index === 0
     const props = {disabled, onClick: handlePrev}
-    if (ArrowLeft) return <ArrowLeft {...props} />
+    const leftArrowClasses = `${classNameBase}-arrow ${classNameBase}-arrowLeft`
+    if (ArrowLeft) return <ArrowLeft {...props} className={leftArrowClasses} />
+
     return (
       <span
         arial-label="Previous"
-        className={`${classNameBase}-prev`}
+        className={`${leftArrowClasses} ${classNameBase}-prev`}
         role="button"
         {...props}
       />
@@ -152,11 +154,14 @@ export default function ReactSlidySlider({
   const renderRightArrow = () => {
     const disabled = items.length <= numOfSlides || index === items.length - 1
     const props = {disabled, onClick: handleNext}
-    if (ArrowRight) return <ArrowRight {...props} />
+    const rightArrowClasses = `${classNameBase}-arrow ${classNameBase}-arrowRight`
+    if (ArrowRight)
+      return <ArrowRight {...props} className={rightArrowClasses} />
+
     return (
       <span
         arial-label="Next"
-        className={`${classNameBase}-next`}
+        className={`${rightArrowClasses} ${classNameBase}-next`}
         role="button"
         {...props}
       />