JSPM – embla-carousel-react@1.3.1

Package Exports

embla-carousel-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (embla-carousel-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Embla Carousel React

A tiny React.js wrapper for Embla Carousel. Please visit the vanilla JavaScript package on Github for documentation, available API methods and customizable options.

TRY DEMO

usage · props · codesandbox

Installation

NPM

npm install embla-carousel-react

Usage

React Hooks

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel-react'

const EmblaCarouselComponent = () => {
  const [EmblaCarouselReact, embla] = useEmblaCarousel({
    loop: false,
  })

  useEffect(() => {
    if (embla) {
      embla.on('select', () => {
        console.log(`Current index is ${embla.selectedScrollSnap()}`)
      })
    }
  }, [embla])

  return (
    <>
      <EmblaCarouselReact>
        <div style={{ display: 'flex' }}>
          <div style={{ flex: '0 0 100%' }}>Slide 1</div>
          <div style={{ flex: '0 0 100%' }}>Slide 2</div>
          <div style={{ flex: '0 0 100%' }}>Slide 3</div>
        </div>
      </EmblaCarouselReact>
      <button onClick={() => embla.scrollPrev()}>Prev</button>
      <button onClick={() => embla.scrollNext()}>Next</button>
    </>
  )
}

export default EmblaCarouselComponent

React Class

import React, { Component } from 'react'
import EmblaCarouselReact from 'embla-carousel-react'

class EmblaCarouselComponent extends Component {
  componentDidMount() {
    this.embla.on('select', () => {
      console.log(
        `Current index is ${this.embla.selectedScrollSnap()}`,
      )
    })
  }

  render() {
    return (
      <>
        <EmblaCarouselReact
          emblaRef={c => (this.embla = c)}
          options={{ loop: false }}
        >
          <div style={{ display: 'flex' }}>
            <div style={{ flex: '0 0 100%' }}>Slide 1</div>
            <div style={{ flex: '0 0 100%' }}>Slide 2</div>
            <div style={{ flex: '0 0 100%' }}>Slide 3</div>
          </div>
        </EmblaCarouselReact>
        <button onClick={() => this.embla.scrollPrev()}>Prev</button>
        <button onClick={() => this.embla.scrollNext()}>Next</button>
      </>
    )
  }
}

export default EmblaCarouselComponent

Props

If you're using the useEmblaCarousel() hook, it accepts the following props:

htmlTagName - Any valid HTML tag like div or ul etc.
className - Applied to top the top level wrapper.
children - Any valid ReactNode.

If you're grabbing the default <EmblaCarouselReact> component, it accepts the following props:

htmlTagName - Any valid HTML tag like div or ul etc.
className - Applied to top the top level wrapper.
children - Any valid ReactNode.
emblaRef - Like a ref function to access the Embla instance in parent component.
options - Same options as the vanilla JS Embla package.

CodeSandbox

Get started instantly with one of the CodeSandboxes below.

Basic Setup - With Previous, Next & Dot buttons.

Parallax - With parallax effect when scrolling.

Autoplay - Example of how to setup Autoplay.

Special Thanks

Massive thanks to Tobias Lindström for pushing this wrapper forward by bringing the useEmblaCarousel hook to Embla Carousel. Amazing work 💖!

Open Source

· · ·