react-hgs-simple-carousel - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

package.json

 {
   "name": "react-hgs-simple-carousel",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Simple and light Carousel",
@@ -33,4 +33,5 @@ "main": "index.js",
   "dependencies": {
-    "es6-simple-carousel": "^1.0.3"
+    "es6-simple-carousel": "^1.0.3",
+    "prop-types": "^15.7.2"
   }
 }

README.md

@@ -1,3 +0,105 @@
-# react-hgs-owl-carousel
+# react-hgs-simple-carousel
+A light and simple react carousel.(power by es6-simple-carousel)
 
-A light and simple react carousel.(power by es6-simple-carousel)
+### 1. Getting Started
+* add SimpleCarousel from react-hgs-simple-carousel on your component.
+
+
+
+```jsx
+// ...
+import SimpleCarousel from 'react-hgs-simple-carousel';
+
+// optional
+import 'es6-simple-carousel/dist/styles/custom.css',
+//...
+```
+### 2. make config for your carousel
+```jsx
+// ...
+import React from 'react';
+
+//...
+// on main function
+const slideConfig = {
+  threshold: 50,
+  infinite: true,
+  nav: true,
+  dots: true,
+  autoPlay: false,
+  responsive: {
+    0: {
+      items: 1.5
+    },
+    560: {
+      items: 3
+    },
+    760: {
+      items: 2.5
+    }
+  }
+};
+// ....
+```
+### 3. use config on your component's body
+```jsx
+  <div class="container">
+      <SimpleCarousel className="myCarousel" slideConfig={slideConfig}>
+          <span className="slide">Slide 1</span>
+          <span className="slide">Slide 2</span>
+          <span className="slide">Slide 3</span>
+          <span className="slide">Slide 4</span>
+          <span className="slide">Slide 5</span>
+          <span className="slide">Slide 6</span>
+          <span className="slide">Slide 7</span>
+      </SimpleCarousel>
+  </div>
+
+```
+
+
+for EX:
+
+```jsx
+import React from 'react';
+import SimpleCarousel from './components/slider';
+import 'es6-simple-carousel/dist/styles/custom.css';
+
+function App() {
+  const slideConfig = {
+    threshold: 50,
+    infinite: true,
+    nav: true,
+    dots: true,
+    autoPlay: false,
+    responsive: {
+      0: {
+        items: 1.5
+      },
+      560: {
+        items: 2.5
+      },
+      760: {
+        items: 3
+      }
+    }
+  };
+
+  return (
+    <div className="container">
+      <SimpleCarousel className="myCarousel" slideConfig={slideConfig} >
+          <span className="slide">Slide 1</span>
+          <span className="slide">Slide 2</span>
+          <span className="slide">Slide 3</span>
+          <span className="slide">Slide 4</span>
+          <span className="slide">Slide 5</span>
+          <span className="slide">Slide 6</span>
+          <span className="slide">Slide 7</span>
+      </SimpleCarousel>
+    </div>
+  );
+}
+export default App;
+
+
+```

src/index.js

@@ -1,25 +0,32 @@
-import React, { useEffect } from 'react';
-import { Slider } from 'es6-simple-carousel';
-import 'es6-simple-carousel/dist/styles/slider.css';
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { Slider } from "es6-simple-carousel";
+import "es6-simple-carousel/dist/styles/slider.css";
 
 function SimpleCarousel(props) {
-  const { className, children,slideConfig,refrence } = props;
+  const { className, children, slideConfig } = props;
+  const refrence = useRef();
   useEffect(() => {
     new Slider({
-        slider:refrence.current,
-        ...slideConfig
-      }
-    );
-  }, [className, refrence, slideConfig,children]);
+      slider: refrence.current,
+      ...slideConfig
+    });
+  }, []);
 
   return (
-    <div className={`slider${!!className ? ` ${className}` : ''}`} ref={refrence}>
-      <div className="wrapper">
-        <div className="slides">
-          {children}
+      <div className={`slider ${className}`} ref={refrence}>
+        <div className="wrapper">
+          <div className="slides">{children}</div>
         </div>
       </div>
-    </div>
   );
 }
+SimpleCarousel.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  slideConfig: PropTypes.object.isRequired
+};
+SimpleCarousel.defaultProps = {
+  className: ""
+};
 export default SimpleCarousel;

No alert changes

Improved metrics

Total package byte prevSize

7442

increased by44.17%

Lines of code

70

increased by11.11%

Number of lines in readme file

106

increased by3433.33%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedprop-types@^15.7.2

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)