Embla Carousel v4.0.0 Release Notes

Release Date: 2020-08-26 // over 1 year ago
  • 🚀 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" }. 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!