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'
Edit this page on GitHub