feat: slider breakpoints 💥

demo/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FreeScrollSliderDemo from './FreeScrollSliderDemo';
-import ThumbnailSliderDemo from './ThumbnailSliderDemo';
+// import ThumbnailSliderDemo from './ThumbnailSliderDemo';
 // import ScrollSnapSliderDemo from './ScrollSnapSliderDemo';
 
 const App: React.FC = () => (
@@ -14,14 +14,14 @@ const App: React.FC = () => (
       Free Scroll Slider:
     </h1>
     <FreeScrollSliderDemo />
-    <h1>
+    {/* <h1>
       Scroll Snap Slider:
-    </h1>
+    </h1> */}
     {/* <ScrollSnapSliderDemo /> */}
-    <h1>
+    {/* <h1>
       Thumbnail Slider Demo:
-    </h1>
-    <ThumbnailSliderDemo />
+    </h1> */}
+    {/* <ThumbnailSliderDemo /> */}
   </div>
 );
 

demo/FreeScrollSliderDemo/index.tsx

@@ -22,6 +22,11 @@ const FreeScrollSliderDemo: React.FC = () => (
       dragScroll
       autoPlay
       pauseOnHover={false}
+      breakpoints={{
+        '(max-width: 576px)': {
+          slidesToShow: 1
+        },
+      }}
     // alignLastSlide={"50px"}
     >
       <div

src/SliderProvider/index.tsx

@@ -9,6 +9,7 @@ import smoothscroll from 'smoothscroll-polyfill';
 import SliderContext, { ISliderContext } from '../SliderContext';
 import reducer from './reducer';
 import useDragScroll from './useDragScroll';
+import { useBreakpoints } from './useBreakpoints';
 
 export type ChildFunction = (context: ISliderContext) => React.ReactNode; // eslint-disable-line no-unused-vars
 
@@ -28,11 +29,19 @@ export type Props = {
   children: React.ReactNode | ChildFunction
   alignLastSlide?: 'trackLeft' | 'offsetLeft' | string | number
   currentSlideIndex?: number
+  breakpoints?: {
+    [key: string]: Omit<Props, "children" | "breakpoints">
+  }
 }
 
 const SliderProvider: React.FC<Props> = (props) => {
   const {
     children,
+  } = props;
+
+  const propsToUse = useBreakpoints(props);
+
+  const {
     onSlide,
     slidesToShow = 3,
     slideOnSelect,
@@ -47,7 +56,7 @@ const SliderProvider: React.FC<Props> = (props) => {
     pause,
     alignLastSlide,
     currentSlideIndex: slideIndexFromProps = 0,
-  } = props;
+  } = propsToUse;
 
   if (useFreeScroll !== undefined) {
     console.warn('`useFreeScroll` prop will be deprecated in the next major release, use `scrollable` instead (`true` by default)');
@@ -197,7 +206,7 @@ const SliderProvider: React.FC<Props> = (props) => {
     }
 
     indexFromPropsRef.current = slideIndexFromProps;
-  }, [slideIndexFromProps])
+  }, [slideIndexFromProps]);
 
   const context: ISliderContext = {
     sliderTrackRef,
@@ -236,6 +245,7 @@ const SliderProvider: React.FC<Props> = (props) => {
         },
       });
     },
+    autoPlay,
     slideWidth,
     slidesToShow,
     slideOnSelect,

src/SliderProvider/useBreakpoints.ts

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Props } from './';
+
+type PropsWithoutChildren = Omit<Props, "children" | "breakpoints">;
+
+export const useBreakpoints = (props: Props): PropsWithoutChildren => {
+  const [propsToUse, setPropsToShow] = useState<PropsWithoutChildren>(props);
+
+  const {
+    breakpoints
+  } = props;
+
+  const animationRef = useRef<number | null>(null);
+
+  const requestAnimation = useCallback((): void => {
+    if (breakpoints) {
+      if (animationRef.current) cancelAnimationFrame(animationRef.current);
+      animationRef.current = requestAnimationFrame(
+        () => {
+          const matchedBreakpoints = Object.keys(breakpoints).map((breakpoint) => {
+            const matches = window.matchMedia(breakpoint).matches;
+            if (matches) return breakpoint;
+            return undefined;
+          }).filter(Boolean) as string[];
+
+          if (matchedBreakpoints.length === 0) {
+            setPropsToShow(props);
+          } else {
+            const lastMatch = matchedBreakpoints[matchedBreakpoints.length - 1];
+            const breakpointProps = breakpoints[lastMatch];
+            setPropsToShow({
+              ...props,
+              ...breakpointProps
+            });
+          }
+        }
+      );
+    }
+  }, [breakpoints]);
+
+  const requestThrottledAnimation = useCallback((): void => {
+    setTimeout(() => {
+      requestAnimation();
+    }, 500);
+  }, [requestAnimation]);
+
+  useEffect(() => {
+    if (breakpoints) {
+      window.addEventListener('resize', requestAnimation);
+      window.addEventListener('orientationchange', requestThrottledAnimation);
+      requestAnimation();
+    }
+
+    return () => {
+      if (breakpoints) {
+        window.removeEventListener('resize', requestAnimation);
+        window.removeEventListener('orientationchange', requestThrottledAnimation);
+      }
+    };
+  }, [
+    requestAnimation,
+    requestThrottledAnimation,
+    breakpoints
+  ]);
+
+  // @ts-ignore
+  delete propsToUse.breakpoints;
+  // @ts-ignore
+  delete propsToUse.children;
+
+  return propsToUse;
+}

src/SliderTrack/getGhostSlideWidth.ts

@@ -48,7 +48,5 @@ export const getGhostSlideWidth = (sliderContext: ISliderContext): string => {
     }
   }
 
-  console.log(ghostSlideWidth)
-
   return ghostSlideWidth;
 }