Skip to content
🍀 A React.js component for Embla Carousel, written in TypeScript.
Branch: master
Clone or download
Latest commit 7d5d98f Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update embla-carousel version Jun 19, 2019
webpack Initial commit Jun 4, 2019
.babelrc Initial commit Jun 4, 2019
.gitignore Initial commit Jun 4, 2019
.prettierignore Initial commit Jun 4, 2019
.prettierrc Initial commit Jun 4, 2019
.travis.yml Initial commit Jun 4, 2019
LICENSE Initial commit Jun 3, 2019
README.md Simplify CSS in README Jul 17, 2019
jestconfig.json Initial commit Jun 4, 2019
package-lock.json 0.2.2 Jul 17, 2019
package.json 0.2.2 Jul 17, 2019
tsconfig.json Initial commit Jun 4, 2019
tslint.json Fix issue with accessing API Jun 19, 2019

README.md


Embla Carousel

Embla Carousel React

A React.js component for Embla Carousel, written in TypeScript.

  DEMO PAGE  


«  USAGE   |   PROPS  »


JavaScript   React


Installation

NPM

npm install embla-carousel-react
import EmblaCarouselReact from 'embla-carousel-react'

Usage

React Hooks

import React, { useState, useEffect } from 'react'

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

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

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

React Class

import React, { Component } from '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>
      </>
    )
  }
}

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.


Open Source

Copyright © 2019-present, David Cetinkaya.
Embla is MIT licensed 💖

You can’t perform that action at this time.