Embla-carousel: Exposing default options

[nikrowell]

Feature request is related to

The Embla Carousel core (all versions)

Describe the solution you'd like

Hi David (@davidcetinkaya),

Love seeing all the traction Embla Carousel is getting! One thing I've found myself doing frequently is creating a default options object on Embla for use with different carousel instances. For example:

_entry or initialization file_

import Embla from 'embla-carousel';

Embla.defaults = {
  loop: true,
  draggableClass: 'cursor-grab',
  draggingClass: 'cursor-grabbing',
};

_component file_

const carousel = Embla(node, {
  ...Embla.defaults,
  loop: false
});

Additional context

Idea initially came from an undocumented Flickity feature. How do you feel about adding something like this? Would be happy to PR if you'd like (though haven't looked at the codebase in a long time 😆)

[davidcetinkaya]

Hi Nik (@nikrowell),

Thank you for your feature request and your clear description. How about exporting the defaultOptions object instead of attaching it to the EmblaCarousel instance initializer?

Usage would look like this:

// Grab default options
import EmblaCarousel, { defaultOptions } from 'embla-carousel'

// Create your defaults
export const carouselDefaultOptions = {
  ...defaultOptions,
  loop: true,
  draggableClass: 'cursor-grab',
  draggingClass: 'cursor-grabbing',
}

// Create your instance
const carousel = EmblaCarousel(emblaNode, {
  ...carouselDefaultOptions,
  loop: false
})

I'm thinking that it might be a good idea to not mutate the EmblaCarousel instance initializer. Note that I'm aware that there might be better names than defaultOptions, so please suggest a different name if you have one in mind 🙂.

Let me know what you think.

Best,
David

[nikrowell]

@davidcetinkaya Makes sense on not wanting to mutate... I'm fine with closing this and continuing to use my approach if I need it, just remembered of the Flickity example and thought I'd throw it out there.

Thanks for being so responsive with everything!

[davidcetinkaya]

@nikrowell, out of curiosity: Do you think my suggestion doesn't add any value when compared to how you've solved this up until now? Do you prefer your initial suggestion over mine?

Best,
David

[nikrowell]

@davidcetinkaya I probably prefer the initial approach, mostly because the defaultOptions didn't reduce any boilerplate. One of the biggest selling points with Embla for me is how lightweight and extensible it is, so omitting features and leaving things like this up to the user is fine with me 😀

[davidcetinkaya]

@nikrowell thank you for your response.

I was just curious so I hope you don’t mind me asking. Please note that I’m almost always open to discussing things, even when my initial response differs from the suggested feature 🙂.

Best,
David

[davidcetinkaya]

Closing this @nikrowell. Feel free to open it again if you want to discuss this further!

Best,
David