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>
, theuseEmblaCarousel()
hook now exposes aref
you can attach to your own component. Theref
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>
returnednull
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!
- ๐ Instead of exposing an encapsulated component