add support for react-slick responsive breakpoints

gracefully handle breakpoints via componentDidUpdate lifecycle
update package version
update demo
update changelog

Author: patricktr

CHANGELOG.md

@@ -1,11 +1,19 @@
+<a name="1.2.0"></a>
+
+# [1.2.0](https://github.com/patricktran/react-magic-slider-dots/compare/v1.1.3...v.1.2.0) (2019-09-10)
+
+Support for responsive breakpoints from react-slick
+
 <a name="1.1.3"></a>
+
 # [1.1.3](https://github.com/patricktran/react-magic-slider-dots/compare/v1.1.1...v.1.1.3) (2019-07-03)
 
 Support for infinite={true} from react-slick
 
 <a name="1.1.2"></a>
-# [1.1.1/1.1.2] (2018-08-10)
+
+# [1.1.1/1.1.2](2018-08-10)
 
 Support for initialSlide value from react-slick being greater than 0
-Use translateX hardware accelerated CSS 
-Update package.json keywords
+Use translateX hardware accelerated CSS
+Update package.json keywords

example/package-lock.json

@@ -10,7 +10,7 @@
     "react-dom": "^16.4.1",
     "react-magic-slider-dots": "file:..",
     "react-scripts": "^1.1.4",
-    "react-slick": "^0.23.1",
+    "react-slick": "^0.25.2",
     "react-syntax-highlighter": "^8.0.1",
     "react-toggle-button": "^2.2.0"
   },

example/package.json

@@ -1,72 +1,93 @@
 import React, { Component } from 'react';
-import Slider from "react-slick";
+import Slider from 'react-slick';
 import ToggleButton from 'react-toggle-button';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { tomorrowNightEighties } from 'react-syntax-highlighter/styles/hljs';
 import MagicSliderDots from 'react-magic-slider-dots';
 import 'react-magic-slider-dots/dist/magic-dots.css';
 
 export default class App extends Component {
-
   constructor(props) {
     super(props);
 
     this.state = {
       enableMagicSliderDots: true
-    }
+    };
   }
 
   handleDotToggle = () => {
     this.setState({
       enableMagicSliderDots: !this.state.enableMagicSliderDots
     });
-  }
+  };
 
-  contentIndexes = [...Array.from({ length: 10 }, (v, k) => k + 1).map((item) => item)];
+  contentIndexes = [...Array.from({ length: 10 }, (v, k) => k + 1).map(item => item)];
 
   render() {
     const { enableMagicSliderDots } = this.state;
 
     var settings = {
       dots: true,
       arrows: true,
-      infinite: true,
+      infinite: false,
       speed: 500,
       slidesToShow: 1,
-      slidesToScroll: 1
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 800,
+          settings: {
+            slidesToShow: 4
+          }
+        },
+        {
+          breakpoint: 480,
+          settings: {
+            slidesToShow: 2
+          }
+        }
+      ]
     };
 
     if (enableMagicSliderDots)
-      settings['appendDots'] = (dots) => {
-        return <MagicSliderDots dots={dots} numDotsToShow={5} dotWidth={30} />
-      }
+      settings['appendDots'] = dots => {
+        return <MagicSliderDots dots={dots} numDotsToShow={5} dotWidth={30} />;
+      };
 
     return (
       <div>
-        <label><ToggleButton
-          value={enableMagicSliderDots}
-          onToggle={this.handleDotToggle} />
+        <label>
+          <ToggleButton value={enableMagicSliderDots} onToggle={this.handleDotToggle} />
           &nbsp;enable magic-slider-dots
         </label>
         <Slider {...settings} key={`slider_${enableMagicSliderDots}`}>
-          {this.contentIndexes.map(index => <div key={index}><h3>{index}</h3></div>)}
+          {this.contentIndexes.map(index => (
+            <div key={index}>
+              <h3>{index}</h3>
+            </div>
+          ))}
         </Slider>
 
         <section className="code-example">
-          <h4>API - <a href="https://patricktran.github.io/react-magic-slider-dots/" target="_blank">click here</a></h4>
+          <h4>
+            API -{' '}
+            <a href="https://patricktran.github.io/react-magic-slider-dots/" target="_blank">
+              click here
+            </a>
+          </h4>
           <h4>Installation</h4>
-          <SyntaxHighlighter language='javascript' style={tomorrowNightEighties}>
+          <SyntaxHighlighter language="javascript" style={tomorrowNightEighties}>
             {`
             //install react slick and css
             npm install react-slick --save
             npm install slick-carousel --save
 
             //install react-magic-slider-dots
             npm install react-magic-slider-dots --save
-        `}</SyntaxHighlighter>
+        `}
+          </SyntaxHighlighter>
           <h4></h4>
-          <SyntaxHighlighter language='javascript' style={tomorrowNightEighties}>{
-            `
+          <SyntaxHighlighter language="javascript" style={tomorrowNightEighties}>{`
         import React, { Component } from 'react'
         import Slider from 'react-slick';
         import 'slick-carousel/slick/slick.css';
@@ -111,8 +132,7 @@ export default class App extends Component {
               </div>
             </Slider>)
           }
-        }`
-          }</SyntaxHighlighter>
+        }`}</SyntaxHighlighter>
         </section>
       </div>
     );

example/src/App.js

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-slider-dots",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.",
   "author": "patricktran",
   "license": "MIT",