JSPM – embla-carousel-react@1.1.0

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, { useState, useCallback, useEffect } from 'react'
import EmblaCarouselReact from 'embla-carousel-react'

const EmblaCarouselComponent = () => {
  const [embla, setEmbla] = useState(null)
  const scrollPrev = useCallback(() => embla.scrollPrev(), [embla])
  const scrollNext = useCallback(() => embla.scrollNext(), [embla])

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

  return (
    <>
      <EmblaCarouselReact
        htmlTagName="div"
        emblaRef={setEmbla}
        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={scrollPrev}>Previous</button>
      <button onClick={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()}`,
      )
    })
  }

  scrollNext() {
    this.embla.scrollNext()
  }

  scrollPrev() {
    this.embla.scrollPrev()
  }

  render() {
    return (
      <>
        <EmblaCarouselReact
          htmlTagName="div"
          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.scrollPrev()}>Previous</button>
        <button onClick={() => this.scrollNext()}>Next</button>
      </>
    )
  }
}

export default EmblaCarouselComponent

Props

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

embla-carousel-react

Package Exports

Readme

Embla Carousel React

Installation

Usage

Props

Open Source