davidjerleke/embla-carousel v4.0.0

v4.0.0 - An upgraded React hook

on GitHub

Note! This major release comes with breaking changes for React users only ⚛️!

Massive thanks to Felix (@xiel) for his contributions to this release 🙏!

🌟 Improvements

• Instead of exposing an encapsulated component <EmblaCarouselReact>, the useEmblaCarousel() hook now exposes a ref you can attach to your own component. The ref approach makes the Embla footprint smaller regarding forcing stuff on the user. Basically, what the <EmblaCarouselReact> component did was creating a React Element with the style { overflow: "hidden" }. As a consequence, the user had to pass a string to choose DOM element type (div, ul, section etc...) and had to use the className prop in order to style the encapsulated element. This release solves issue #94.
• Embla Carousel didn't initialize correctly if the component that used <EmblaCarouselReact> returned null before initializing the carousel. This release solves issue #91.
• The options parameter passed to the useEmblaCarousel({ loop: false }) was before this release a one way ticket. Changing options didn't reinitialize the carousel with the new options. This has been fixed in this release.

Migration

Migrating is luckily very easy.

❌ Deprecated way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [EmblaCarouselReact, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <EmblaCarouselReact>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </EmblaCarouselReact>
  )
}

export default EmblaCarousel

✅ New way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <div className="embla" ref={emblaRef}> /* Make sure this element has overflow: hidden; */
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

export default EmblaCarousel

Enjoy!