Embla Carousel v4.0.0 Release Notes

Release Date: 2020-08-26 // over 3 years 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!