embla-carousel-react - npm Package Compare versions

Comparing version 2.0.3 to 5.0.0

package.json

 {
   "name": "embla-carousel-react",
-  "version": "2.0.3",
+  "version": "5.0.0",
   "author": "David Cetinkaya",
-  "private": false,
-  "description": "A tiny React.js wrapper for Embla Carousel",
+  "description": "A lightweight carousel library with fluid motion and great swipe precision",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidcetinkaya/embla-carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/davidcetinkaya/embla-carousel/issues"
+  },
+  "homepage": "https://www.embla-carousel.com",
+  "license": "MIT",
   "keywords": [
     "slider",
     "carousel",
+    "slideshow",
+    "gallery",
     "lightweight",
     "touch",
-    "react",
-    "react-component",
-    "embla-carousel"
+    "javascript",
+    "typescript",
+    "react"
   ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/davidcetinkaya/embla-carousel-react"
-  },
-  "bugs": {
-    "url": "https://github.com/davidcetinkaya/embla-carousel-react/issues"
-  },
-  "homepage": "https://github.com/davidcetinkaya/embla-carousel-react#readme",
+  "main": "embla-carousel-react.umd.js",
+  "unpkg": "embla-carousel-react.umd.js",
+  "module": "embla-carousel-react.esm.js",
+  "types": "index.d.ts",
+  "sideEffects": false,
   "files": [
-    "lib/**/*"
+    "embla-carousel-react*",
+    "components/**/*",
+    "index.d.ts"
   ],
-  "browserslist": "last 5 versions",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
   "scripts": {
-    "test": "jest --config jestconfig.json",
-    "build": "webpack -p --config ./webpack/webpack.config",
-    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
-    "lint": "tslint -p tsconfig.json",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
+    "test": "echo \"Info: no tests specified\" && exit 0",
+    "build": "rollup -c",
+    "start": "rollup -c --watch",
+    "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\"",
+    "eslint:fix": "eslint \"src/**/*.{js,tsx,ts}\" --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^24.9.1",
-    "@types/jest-diff": "^20.0.0",
-    "@types/react": "^16.9.34",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^1.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest": "^24.9.0",
-    "prettier": "^1.19.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "ts-jest": "^25.4.0",
-    "tslint": "^5.20.1",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.8.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-transform-object-assign": "^7.12.13",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-typescript": "^7.13.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@types/jest": "^26.0.22",
+    "@types/react": "^17.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
+    "rollup": "^2.45.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4"
   },
   "dependencies": {
-    "embla-carousel": "^3.0.2"
+    "embla-carousel": "5.0.0"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.2"
   }
-}
+}

README.md

@@ -1,7 +0,5 @@
-### Version 3 is here! Please read the [migration guide here](https://github.com/davidcetinkaya/embla-carousel/releases/tag/v3.0.0). It may take some time to update the documentation so bare with me. Cheers!
-
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank"><img width="70" height="70" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
@@ -11,7 +9,7 @@ </p>
   <p align="center">
-    <a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/license-MIT-green.svg"></a>
-    <a href="https://www.npmjs.com/package/embla-carousel-react" target="_blank"><img src="https://img.shields.io/npm/v/embla-carousel-react.svg"></a>
-    <a href="https://travis-ci.org/davidcetinkaya/embla-carousel-react" target="_blank"><img src="https://img.shields.io/travis/davidcetinkaya/embla-carousel-react/master.svg"></a>
-    <a href="https://prettier.io" target="_blank"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
-    <a href="https://www.npmjs.com/package/embla-carousel-react" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel-react?color=%234c1&label=gzip%20size">
+    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
+    <a href="https://www.npmjs.com/package/embla-carousel"><img src="https://img.shields.io/npm/v/embla-carousel.svg?color=%23c1a8e2"></a>
+    <a href="https://github.com/davidcetinkaya/embla-carousel/actions?query=workflow%3A%22Continuous+Integration%22"><img src="https://img.shields.io/github/workflow/status/davidcetinkaya/embla-carousel/Continuous%20Integration?color=%238ab4f8"></a>
+    <a href="https://prettier.io"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat&color=%23c1a8e2"></a>
+    <a href="https://bundlephobia.com/result?p=embla-carousel@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel?color=%238ab4f8&label=gzip%20size">
     </a>
@@ -21,7 +19,7 @@ </p>
   <strong>
-    <h2 align="center">Embla Carousel React</h2>
+    <h2 align="center">Embla Carousel</h2>
   </strong>
 
   <p align="center">
-    A tiny React.js wrapper for <a href="https://github.com/davidcetinkaya/embla-carousel">Embla Carousel</a>. Please visit the vanilla JavaScript <a href="https://github.com/davidcetinkaya/embla-carousel">package on Github</a> for documentation, available API methods and customizable options.
+    The <strong>React version</strong> of <a href="https://www.embla-carousel.com/">Embla Carousel</a>.
   </p>
@@ -33,195 +31,26 @@
     <strong>
-      <code>&nbsp;<a href="https://davidcetinkaya.github.io/embla-carousel">TRY DEMO</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/get-started/#choose-installation-type">Installation</a>&nbsp;</code>
     </strong>
   </p>
 
-  <br>
-
   <p align="center">
     <strong>
-      <a href="#usage">usage</a>
-      &nbsp; &middot; &nbsp;
-      <a href="#props">props</a>
-      &nbsp; &middot; &nbsp;
-      <a href="#codesandbox">codesandbox</a>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/api/">API Reference</a>&nbsp;</code>
     </strong>
   </p>
 
-  <br>
-
   <p align="center">
-    <a href="https://github.com/davidcetinkaya/embla-carousel">
-      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="45" alt="JavaScript" />
-    </a>
-    &nbsp;
-    <a href="https://github.com/davidcetinkaya/embla-carousel-react">
-      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="45" alt="React" />
-    </a>
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+    </strong>
   </p>
 </div>
-<br />
 
-## Installation
-
-NPM
-
-<pre>npm install <a href="https://www.npmjs.com/package/embla-carousel-react">embla-carousel-react</a></pre>
-
 <br>
 
-## Usage
-
-React Hooks
-
-```javascript
-import React, { useEffect } from 'react'
-import { useEmblaCarousel } from 'embla-carousel-react'
-
-const EmblaCarouselComponent = () => {
-  const [EmblaCarouselReact, embla] = useEmblaCarousel({
-    loop: false,
-  })
-
-  useEffect(() => {
-    if (embla) {
-      embla.on('select', () => {
-        console.log(`Current index is ${embla.selectedScrollSnap()}`)
-      })
-    }
-  }, [embla])
-
-  return (
-    <>
-      <EmblaCarouselReact>
-        <div style={{ display: 'flex' }}>
-          <div style={{ flex: '0 0 100%' }}>Slide 1</div>
-          <div style={{ flex: '0 0 100%' }}>Slide 2</div>
-          <div style={{ flex: '0 0 100%' }}>Slide 3</div>
-        </div>
-      </EmblaCarouselReact>
-      <button onClick={() => embla.scrollPrev()}>Prev</button>
-      <button onClick={() => embla.scrollNext()}>Next</button>
-    </>
-  )
-}
-
-export default EmblaCarouselComponent
-```
-
-React Class
-
-```javascript
-import React, { Component } from 'react'
-import EmblaCarouselReact from 'embla-carousel-react'
-
-class EmblaCarouselComponent extends Component {
-  componentDidMount() {
-    this.embla.on('select', () => {
-      console.log(
-        `Current index is ${this.embla.selectedScrollSnap()}`,
-      )
-    })
-  }
-
-  render() {
-    return (
-      <>
-        <EmblaCarouselReact
-          emblaRef={c => (this.embla = c)}
-          options={{ loop: false }}
-        >
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: '0 0 100%' }}>Slide 1</div>
-            <div style={{ flex: '0 0 100%' }}>Slide 2</div>
-            <div style={{ flex: '0 0 100%' }}>Slide 3</div>
-          </div>
-        </EmblaCarouselReact>
-        <button onClick={() => this.embla.scrollPrev()}>Prev</button>
-        <button onClick={() => this.embla.scrollNext()}>Next</button>
-      </>
-    )
-  }
-}
-
-export default EmblaCarouselComponent
-```
-
-<br>
-
-## Props
-
-If you're using the `useEmblaCarousel()` hook, it accepts the following props:
-
-- **`htmlTagName`** - Any valid HTML tag like `div` or `ul` etc.
-- **`className`** - Applied to top the top level wrapper.
-- **`children`** - Any valid ReactNode.
-
-If you're grabbing the default `<EmblaCarouselReact>` component, it accepts the following props:
-
-- **`htmlTagName`** - Any valid HTML tag like `div` or `ul` etc.
-- **`className`** - Applied to top the top level wrapper.
-- **`children`** - Any valid ReactNode.
-- **`emblaRef`** - Like a ref function to access the Embla instance in parent component.
-- **`options`** - Same [options](https://github.com/davidcetinkaya/embla-carousel#options) as the vanilla JS Embla package.
-
-<br>
-
-## CodeSandbox
-
-<p>Get started instantly with one of the CodeSandboxes below.</p>
-
-<p>
-  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> &nbsp;
-  <a href="https://codesandbox.io/s/embla-carousel-react-basic-setup-znjzv">
-    <code>Basic Setup</code>
-  </a> 
-  - With Previous, Next & Dot buttons.
-</p>
-
-<p>
-  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> &nbsp;
-  <a href="https://codesandbox.io/s/embla-carousel-react-styled-components-we2je">
-    <code>Styled Components</code>
-  </a> 
-  - Basic Setup with the <a href="https://github.com/styled-components/styled-components">Styled Components</a> library.
-</p>
-
-<p>
-  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> &nbsp;
-  <a href="https://codesandbox.io/s/embla-carousel-react-parallax-jedzb">
-    <code>Parallax</code>
-  </a> 
-  - With parallax effect when scrolling.
-</p>
-<p>
-  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> &nbsp;
-  <a href="https://codesandbox.io/s/embla-carousel-react-iox4t">
-    <code>Autoplay</code>
-  </a> 
-  - Example of how to setup Autoplay.
-</p>
-
-<br>
-
-<div align="center">
-  <strong>
-    <h2 align="center">Special Thanks</h2>
-  </strong>
-  <p align="center">
-    Massive thanks to <a href="https://github.com/gunnarx2">Tobias Lindström</a> for pushing this wrapper forward by bringing the <code>useEmblaCarousel</code> hook to Embla Carousel. Amazing work 💖!
-  </p>
-  <p align="center">
-    <a href="https://github.com/gunnarx2"><img src="https://avatars2.githubusercontent.com/u/10469652?s=122&v=4" title="gunnarx2" width="66" height="66" style="max-width:100%;"></a>
-  </p>
-</div>
-
-<br>
-
 <h2 align="center">Open Source</h2>
 
 <p align="center">
-  <sup>
-    Copyright © 2019-present, <a href="https://github.com/davidcetinkaya">David Cetinkaya</a> & <a href="https://github.com/gunnarx2">Tobias Lindström</a>.
-  </sup><br>
-  Embla is <a href="https://github.com/davidcetinkaya/embla-carousel-react/blob/master/LICENSE">MIT licensed</a> 💖
+  <sup>Copyright © 2019-present, David Cetinkaya.</sup><br>
+  Embla is <a href="https://github.com/davidcetinkaya/embla-carousel/blob/master/LICENSE">MIT licensed</a> 💖.
 </p>
@@ -234,5 +63,9 @@
 <p align="center">
+  Thanks <a href="https://www.browserstack.com">BrowserStack</a>.
+</p>
+
+<p align="center">
   <a href="https://www.browserstack.com">
-    <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/browserstack-logo.svg" height="60" alt="Embla Carousel BrowserStack" />
+    <img src="https://www.embla-carousel.com/browserstack-logo.svg" width="45" height="45" />
     </a>
 </p>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198776

increased by685.43%

Dependency count

2

decreased by-33.33%

Dev dependency count

20

decreased by-9.09%

Number of package files

10

increased by25%

Lines of code

2798

increased by861.51%

Number of low maintenance alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of lines in readme file

68

decreased by-71.06%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedembla-carousel@5.0.0(transitive)

• + Addedreact@17.0.2(transitive)

• - Removedembla-carousel@3.0.28(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updatedembla-carousel@5.0.0