TypeScript
Before continuing with this guide, make sure to setup a working carousel following one of these setup guides:
Embla Carousel and all its related packages are fully typed and has built-in type definitions, because they're written in TypeScript.
Module usage
The embla-carousel
package exports a set of useful types that you can import like so:
import EmblaCarousel, { EmblaCarouselType, EmblaOptionsType, EmblaPluginType, EmblaEventType,} from 'embla-carousel'
You can use these types to create utilitiy functions. In this example the EmblaCarouselType
is used to create a function that is responsible for setting up carousel buttons:
import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
function setupEmblaButtons(embla: EmblaCarouselType): void { // Setup buttons code here}
const emblaNodes: HTMLElement[] = Array.from( document.querySelectorAll('.embla'),)
emblaNodes.forEach((emblaNode) => { const embla = EmblaCarousel(emblaNode) setupEmblaButtons(embla)})
React usage
The embla-carousel-react
package exports the following set of useful types:
import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType, EmblaPluginType, EmblaEventType, UseEmblaCarouselType,} from 'embla-carousel-react'
For example, you can use it to create type safe and re-usable Embla components. In the following example EmblaOptionsType
is used to properly type the options prop:
import React, { ReactNode } from 'react'import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
type PropType = { options?: EmblaOptionsType slides: ReactNode[]}
export const EmblaCarousel = (props: PropType) => { const { options, slides } = props const [emblaRef] = useEmblaCarousel(options)
return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> {slides.map((slide, index) => ( <div className="embla__slide" key={index}> {slide} </div> ))} </div> </div> )}
Plugin usage
Plugins also export type definitions. Their type definitions are prefixed with the plugin name:
import Autoplay, { AutoplayType, AutoplayOptionsType,} from 'embla-carousel-autoplay'