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'