Merge 3bfe54b into a1701dc

react/next/README.md

@@ -121,6 +121,7 @@ const products = [
 | `classNames` | `ClassNames` | 🚫 | - | Custom classes |
 | `thumbnails` | `Thumbnails` | 🚫 | - | Props for thumbnails |
 | `autoplay` | `AutoplayProps` | 🚫 | - | Props for autoplay |
+| `keyboardControlled`  | `Boolean` | 🚫 | false | If is controlled via keyboard arrows or not |
 
 
 

react/next/hooks/useKeyboardArrows.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+
+/**
+ * Adds event listener to call passed functions by pressing the left or right arrows
+ * @param onLeft Function that is called on left arrow key press
+ * @param onRight Function that is called on arrow arrow key press
+ * @param deps Dependencies
+ */
+const useKeyboardArrows = (
+  onLeft: () => void,
+  onRight: () => void,
+  deps: Array<any>
+) => {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      event.code === 'ArrowLeft' && onLeft()
+      event.code === 'ArrowRight' && onRight()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, deps)
+}
+
+export default useKeyboardArrows

react/next/index.tsx

@@ -12,6 +12,7 @@ import SlideList from './components/SlideList'
 import Thumbnails from './components/Thumbnails'
 import useControlledTimeout from './hooks/useControlledTimeout'
 import useHovering from './hooks/useHovering'
+import useKeyboardArrows from './hooks/useKeyboardArrows'
 
 /**
  * Slider's main component
@@ -136,6 +137,9 @@ const SliderNext: FC<SliderProps> = props => {
     populate('prev')
   }
 
+  props.keyboardControlled &&
+    useKeyboardArrows(prev, next, [state.domLoaded, state.currentSlide])
+
   /** Go to any slide by index */
   const goToSlide = (slide: number): void => {
     const { itemWidth } = state
@@ -299,6 +303,7 @@ SliderNext.defaultProps = {
     delay: 0,
     timing: 'ease-in-out',
   },
+  keyboardControlled: false,
 }
 
 export default SliderNext

react/next/typings/global.d.ts

@@ -85,6 +85,8 @@ interface SliderProps {
     /** If should stop the timeout by hovering the slide */
     stopOnHover?: boolean
   }
+  /** If is controlled via keyboard arrows or not */
+  keyboardControlled?: boolean
 }
 
 interface SliderState {