V3.0.0 (#403)

* upgrade 2.4.0

* updated README

* updated newest type for Swiper

* fixed bug

* upgrade 3.0.0

* updated travis config

* fixed test

* fixed types issue

.travis.yml

@@ -4,7 +4,7 @@ cache:
   directories:
     - node_modules
 node_js:
-  - 8
+  - 11
 install:
   - yarn install
   - npm install -g codecov

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log for React-id-swiper
 
+## [v3.0.0](https://github.com/kidjp85/react-id-swiper/compare/3.0.0...2.4.0) - Released on Feb 29th, 2020
+  * Upgrade to support `Swiper` version 5.3.0
+  * Replace `createRef` with `useRef` for `swiper` node ref
+  * Upgrade npm packages
+
+
 ## [v2.4.0](https://github.com/kidjp85/react-id-swiper/compare/2.4.0...2.3.2) - Released on Nov 7th, 2019
   * Upgrade to support `Swiper` version 5.x
   * Drop support for `Swiper`'s stylesheet

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Nguyen Hoang Phuc
+Copyright (c) 2020 Nguyen Hoang Phuc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -7,7 +7,7 @@
 
 [![Package Quality](http://npm.packagequality.com/badge/react-id-swiper.png)](http://packagequality.com/#?package=react-id-swiper)
 
-react-id-swiper ( Newest version 2.4.0 )
+react-id-swiper ( Newest version 3.0.0 )
 ========================================
 > A library to use [Swiper](http://www.idangero.us/swiper/get-started/) as a ReactJs component
 
@@ -86,11 +86,11 @@ yarn add react-id-swiper@latest swiper@latest
 ## CDN
 
 ```html
-<script src="https://unpkg.com/react-id-swiper@2.4.0/lib/react-id-swiper.js"></script>
+<script src="https://unpkg.com/react-id-swiper@3.0.0/lib/react-id-swiper.js"></script>
 ```
 
 ```html
-<script src="https://unpkg.com/react-id-swiper@2.4.0/lib/react-id-swiper.min.js"></script>
+<script src="https://unpkg.com/react-id-swiper@3.0.0/lib/react-id-swiper.min.js"></script>
 ```
 
 # Styling
@@ -100,11 +100,11 @@ yarn add react-id-swiper@latest swiper@latest
 Use Swiper stylesheet file from CDN
 
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.css">
+<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.min.css">
+<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
 ```
 
 **For version <=2.3.2**
@@ -123,7 +123,7 @@ import 'react-id-swiper/lib/styles/css/swiper.css'
 import 'react-id-swiper/lib/styles/scss/swiper.scss'
 ```
 
-**For version >=2.4.0**
+**For version >=3.0.0**
 
 You should import directly from `Swiper` packages which supports css, scss and less
 
@@ -215,7 +215,7 @@ import React, { useState } from 'react';
 import Swiper from 'react-id-swiper';
 
 const ManipulatingSwiper = () => {
-  const [swiper, updateSwiper] = useState(null);
+  const [swiper, setSwiper] = useState(null);
 
   const goNext = () => {
     if (swiper !== null) {
@@ -231,7 +231,7 @@ const ManipulatingSwiper = () => {
 
   return (
     <div>
-      <Swiper getSwiper={updateSwiper}>
+      <Swiper getSwiper={setSwiper}>
         <div>Slide 1</div>
         <div>Slide 2</div>
         <div>Slide 3</div>
@@ -344,7 +344,7 @@ Each slide should be wrapped by HTML element
 
 ```javascript
 <Swiper {...params}>
-  Slide content // notice no HTML element
+  Slide content
 </Swiper>
 ```
 

babel.config.js

@@ -1,11 +1,11 @@
-module.exports = function (api) {
+module.exports = function(api) {
   api.cache(true);
 
-  const presets = ["@babel/preset-env"];
-  const plugins = ["@babel/plugin-syntax-dynamic-import"];
+  const presets = ['@babel/preset-env'];
+  const plugins = ['@babel/plugin-syntax-dynamic-import'];
 
   return {
     presets,
     plugins
   };
-}
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-id-swiper",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "ReactJs component for iDangerous Swiper",
   "main": "lib/index",
   "types": "lib/index.d.ts",
@@ -56,50 +56,50 @@
     "swiper": ">=5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.7.0",
-    "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.22",
-    "@types/jsdom": "^12.2.4",
+    "@babel/core": "^7.8.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^25.1.3",
+    "@types/jsdom": "12.2.4",
     "@types/object-assign": "^4.0.30",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.4",
-    "@types/swiper": "^5.2.0",
-    "@typescript-eslint/eslint-plugin": "^2.6.1",
-    "@typescript-eslint/parser": "^2.6.1",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/swiper": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^2.21.0",
+    "@typescript-eslint/parser": "^2.21.0",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.0",
-    "cross-env": "^6.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
+    "cross-env": "^7.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
     "eslint-config-react": "^1.1.7",
     "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jest": "^23.0.2",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.0.0",
-    "husky": "^3.0.9",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.4.2",
-    "prettier": "^1.18.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "rimraf": "^3.0.0",
-    "swiper": "^5.2.0",
-    "ts-jest": "^24.1.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jest": "^23.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.8",
+    "prettier": "^1.19.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "rimraf": "^3.0.2",
+    "swiper": "^5.3.1",
+    "ts-jest": "^25.2.1",
     "ts-loader": "^6.2.1",
-    "typescript": "^3.7.2",
+    "typescript": "^3.8.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10"
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11"
   },
   "jest": {
     "resetMocks": true,

src/ReactIdSwiper.custom.tsx

@@ -1,7 +1,6 @@
 import React, {
   FunctionComponent,
   Children,
-  createRef,
   useEffect,
   useRef,
   cloneElement,
@@ -41,25 +40,15 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
     modules = []
   } = props;
 
-  // No render if wrapper elements are not provided or when modules is empty
-  if (!Swiper || !children || !ContainerEl || !WrapperEl) {
-    return null;
-  }
-
   // Define swiper ref
-  const swiperNodeRef = createRef<HTMLDivElement>();
+  const swiperNodeRef = useRef<HTMLDivElement>(null);
 
   // Define swiper instance ref
   const swiperInstanceRef = useRef<SwiperInstance>(null);
 
   // Initialize modules to use with swiper
-  Swiper.use(modules);
-
-  // Validate children props
-  if (!validateChildren(children)) {
-    console.warn('Children should be react element or an array of react element!!');
-
-    return null;
+  if (Swiper) {
+    Swiper.use(modules);
   }
 
   // Get current active slide key
@@ -189,6 +178,18 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
   const shouldRenderNextButton = isNavigationModuleAvailable && navigation && navigation.nextEl;
   const shouldRenderPrevButton = isNavigationModuleAvailable && navigation && navigation.prevEl;
 
+  // No render if wrapper elements are not provided or when modules is empty
+  if (!Swiper || !children || !ContainerEl || !WrapperEl) {
+    return null;
+  }
+
+  // Validate children props
+  if (!validateChildren(children)) {
+    console.warn('Children should be react element or an array of react element!!');
+
+    return null;
+  }
+
   return (
     <ContainerEl className={containerClass} dir={rtl && 'rtl'} ref={swiperNodeRef}>
       {shouldRenderParallax && renderParallax && renderParallax(props)}

src/ReactIdSwiper.tsx

@@ -1,7 +1,6 @@
 import React, {
   FunctionComponent,
   Children,
-  createRef,
   useEffect,
   useRef,
   cloneElement,
@@ -41,7 +40,7 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
   } = props;
 
   // Define swiper ref
-  const swiperNodeRef = createRef<HTMLDivElement>();
+  const swiperNodeRef = useRef<HTMLDivElement>(null);
 
   // Define swiper instance ref
   const swiperInstanceRef = useRef<SwiperInstance>(null);

src/types.ts

@@ -1,12 +1,14 @@
 import { ReactElement } from 'react';
 
+type Maybe<T> = T | null;
+
 import Swiper, {
   SwiperOptions,
   SelectableElement as SwiperSelectableElement,
   SwiperModule
 } from 'swiper';
 
-export type ReactIdSwiperRenderProps = (props: ReactIdSwiperProps) => ReactElement | null;
+export type ReactIdSwiperRenderProps = (props: ReactIdSwiperProps) => Maybe<ReactElement>;
 
 export type WrappedElementType = 'div' | 'section' | 'span';
 
@@ -31,7 +33,7 @@ export interface ReactIdSwiperProps extends SwiperOptions {
   renderPrevButton?: ReactIdSwiperRenderProps;
   renderNextButton?: ReactIdSwiperRenderProps;
   renderParallax?: ReactIdSwiperRenderProps;
-  rtl?: string | undefined;
+  rtl?: string;
   children?: ReactIdSwiperChildren;
   parallaxEl?: {
     el: string;
@@ -46,7 +48,7 @@ export interface ReactIdSwiperCustomProps extends ReactIdSwiperProps {
 
 export type SelectableElement = SwiperSelectableElement | undefined;
 
-export type SwiperInstance = Swiper | null;
+export type SwiperInstance = Maybe<Swiper>;
 
 export type SwiperModuleName =
   | 'navigation'