embla-carousel-react - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

package.json

 {
   "name": "embla-carousel-react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "David Cetinkaya",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -50,7 +50,7 @@ <br />
   <a href="https://github.com/davidcetinkaya/embla-carousel">
-    <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="50" alt="Embla Carousel JavaScript" />
+    <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="50" 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="50" alt="Embla Carousel React" />
+    <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="50" alt="React" />
   </a>
@@ -71,7 +71,53 @@ </p>
 
-## QuickStart
+## Usage
 
-React Component
+React Hooks
 
 ```javascript
+import React, { useState, useEffect } from 'react'
+
+const EmblaCarouselComponent = () => {
+  const [embla, setEmbla] = useState(null)
+  const scrollPrev = () => embla.scrollPrev()
+  const scrollNext = () => embla.scrollNext()
+
+  useEffect(() => {
+    if (embla) {
+      embla.on('select', () => {
+        console.log(`Current index is ${embla.selectedScrollSnap()}`)
+      })
+    }
+  }, [embla])
+
+  return (
+    <>
+      <EmblaCarouselReact
+        htmlTagName="div"
+        emblaRef={c => setEmbla(c)}
+        options={{ loop: false }}
+      >
+        <div style={{ display: 'flex' }}>
+          <div style={{ flex: '0 0 auto', width: '100%' }}>
+            Slide 1
+          </div>
+          <div style={{ flex: '0 0 auto', width: '100%' }}>
+            Slide 2
+          </div>
+          <div style={{ flex: '0 0 auto', width: '100%' }}>
+            Slide 3
+          </div>
+        </div>
+      </EmblaCarouselReact>
+      <button onClick={scrollPrev}>Previous</button>
+      <button onClick={scrollNext}>Next</button>
+    </>
+  )
+}
+```
+
+React Class Component
+
+```javascript
+import React, { Component } from 'react'
+
 class EmblaCarouselComponent extends Component {
@@ -86,7 +132,7 @@ componentDidMount() {
 
-  next() {
+  scrollNext() {
     this.embla.scrollNext()
   }
 
-  prev() {
+  scrollPrev() {
     this.embla.scrollPrev()
@@ -103,3 +149,3 @@ }
         >
-          <div style={{ display: 'flex', willChange: 'transform' }}>
+          <div style={{ display: 'flex' }}>
             <div style={{ flex: '0 0 auto', width: '100%' }}>
@@ -116,4 +162,4 @@ Slide 1
         </EmblaCarouselReact>
-        <button onClick={() => this.prev()}>Previous</button>
-        <button onClick={() => this.next()}>Next</button>
+        <button onClick={() => this.scrollPrev()}>Previous</button>
+        <button onClick={() => this.scrollNext()}>Next</button>
       </>
@@ -120,0 +166,0 @@ )

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

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

Improved metrics

Total package byte prevSize

16932

increased by6.82%

Number of lines in readme file

182

increased by33.82%

No dependency changes