Merge pull request #9 from ItsMrAkhil/responsive

Add responsiveness to the carousel

Author: ItsMrAkhil

README.md

@@ -43,6 +43,33 @@ const ExampleSlider = () => (
 ReactDOM.render(<ExampleSlider />, document.getElementById('root'));
 ```
 
+#### Responsive
+`react-styled-carousel` is responsive. Below is the example configuration of responsiveness.
+
+> **Note:** If `responsive` prop is provided then, it'll override the cardsToShow prop. In other words cardsToShow will not work.
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom'
+import Slider from 'react-styled-carousel';
+
+const responsive = [
+  { breakPoint: 1280, cardsToShow: 4 }, // this will be applied if screen size is greater than 1280px. cardsToShow will become 4.
+  { breakPoint: 760, cardsToShow: 2 },
+];
+
+const ExampleSlider = () => (
+  <Slider>
+    <h1>1</h1>
+    <h1>2</h1>
+    <h1>3</h1>
+    <h1>4</h1>
+  </Slider>
+);
+
+ReactDOM.render(<ExampleSlider />, document.getElementById('root'));
+```
+
 #### Configurable Props
 Props | Type | Default Value | Description
 ----- | ---- | ------------- | -----------
@@ -56,6 +83,7 @@ Props | Type | Default Value | Description
 `cardsToShow` | `Number` | Children length | How many cards to be shown for a single slide.
 `afterSlide` | `Function` | null | This function will be executed after every sliding is completed
 `beforeSlide` | `Function` | null | This function will be executed before starting every sliding
+`responsive` | `Array` | null | Use this for responsiveness [Documentation](#responsive)
 
 License
 ----

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-styled-carousel",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "React styled-components carousel. No css is needed, fully configurable, SSR supported. Theming supported.",
   "main": "build/Slider.js",
   "scripts": {
@@ -53,6 +53,7 @@
     "webpack-dev-server": "^2.11.1"
   },
   "dependencies": {
+    "lodash.sortby": "^4.7.0",
     "react": "^16.2.0",
     "styled-components": "^3.1.6"
   },

src/Root.js

@@ -10,7 +10,7 @@ const Root = () => (
   <Container>
     <h1>Styled Carousel Example</h1>
     <Slider
-      cardsToShow={2}
+      cardsToShow={4}
     >
       <ExampleCard>1</ExampleCard>
       <ExampleCard>2</ExampleCard>

src/components/Slider.js

@@ -1,5 +1,7 @@
+/* global window */
 import React from 'react';
 import PropTypes from 'prop-types';
+import sortBy from 'lodash.sortby';
 
 import SliderTrack from './SliderTrack';
 import CardWrapper from './CardWrapper';
@@ -10,6 +12,14 @@ import SliderList from './SliderList';
 import Dots from './Dots';
 import DefaultDot from './Dot';
 
+if (typeof window === 'undefined') {
+  global.window = {
+    addEventListener: () => null,
+    removeEventListener: () => null,
+    innerWidth: 1280,
+  };
+}
+
 class Slider extends React.Component {
   constructor(props) {
     super(props);
@@ -20,7 +30,12 @@ class Slider extends React.Component {
     this.renderDots = this.renderDots.bind(this);
     this.renderLeftArrow = this.renderLeftArrow.bind(this);
     this.renderRightArrow = this.renderRightArrow.bind(this);
-    this.state = { initialCard: 0, childWidth: 0, cardsToShow: 0 };
+    this.updateResponsiveView = this.updateResponsiveView.bind(this);
+    this.state = {
+      initialCard: 0,
+      childWidth: 0,
+      cardsToShow: 0,
+    };
   }
 
   componentDidMount() {
@@ -30,7 +45,33 @@ class Slider extends React.Component {
     this.setState({ // eslint-disable-line react/no-did-mount-set-state
       childWidth,
       cardsToShow: childrenCount,
-    });
+    }, () => this.updateResponsiveView());
+    window.addEventListener('resize', this.updateResponsiveView);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateResponsiveView);
+  }
+
+  updateResponsiveView() {
+    const { children } = this.props;
+    let { responsive } = this.props;
+    const numberOfChildren = children ? children.length || 1 : 0;
+    if (responsive) {
+      responsive = sortBy(responsive, 'breakPoint');
+      let updatedCardsToShow = this.state.cardsToShow;
+      responsive.forEach(({ breakPoint, cardsToShow }) => {
+        if (breakPoint <= window.innerWidth) {
+          updatedCardsToShow = cardsToShow;
+        }
+      });
+      const updatedInitialCard = (numberOfChildren - updatedCardsToShow) < this.state.initialCard ? (numberOfChildren - updatedCardsToShow) : this.state.initialCard;
+      this.setState({
+        cardsToShow: updatedCardsToShow,
+        childWidth: 100 / updatedCardsToShow,
+        initialCard: updatedInitialCard,
+      });
+    }
   }
 
   changeInitialCard(initialCard) {
@@ -155,6 +196,7 @@ Slider.defaultProps = {
   afterSlide: null,
   beforeSlide: null,
   infinite: true,
+  responsive: null,
 };
 
 Slider.propTypes = {
@@ -168,6 +210,10 @@ Slider.propTypes = {
   afterSlide: PropTypes.func,
   beforeSlide: PropTypes.func,
   infinite: PropTypes.bool,
+  responsive: PropTypes.arrayOf(PropTypes.shape({
+    breakPoint: PropTypes.number.isRequired,
+    cardsToShow: PropTypes.number.isRequired,
+  })),
 };
 
 export default Slider;