THIS PACKAGE HAS MOVED INTO THE CORE LIBRARY. Read more here about how to migrate. Cheers!


Embla Carousel

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


JavaScript   React


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.

Embla Carousel CodeSandbox   Basic Setup - With Previous, Next & Dot buttons.

Embla Carousel CodeSandbox   Styled Components - Basic Setup with the Styled Components library.

Embla Carousel CodeSandbox   Parallax - With parallax effect when scrolling.

Embla Carousel CodeSandbox   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

Copyright © 2019-present, David Cetinkaya & Tobias Lindström.
Embla is MIT licensed 💖

· · ·

Embla Carousel BrowserStack

Embla Carousel React

🍀 THIS PACKAGE HAS MOVED - Read more here about how to migrate here: https://github.com/davidcetinkaya/embla-carousel-react/issues/33

Embla Carousel React Info

⭐ Stars 100
🔗 Source Code github.com
🕒 Last Update 9 months ago
🕒 Created 2 years ago
🐞 Open Issues 2
➗ Star-Issue Ratio 50
😎 Author davidcetinkaya