Exported types for EmblaOptions

[Davy-F]

Feature request is related to

• [X] embla-carousel (core package)
• [X] embla-carousel-react
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Is your feature request related to an issue?

Yes.

Describe the solution you'd like

Is there a way we can get Types for each component please? I've migrated to the latest version as we were experiencing some snapping issues and I cannot get exported types for EmblaOptionsType

Describe alternatives you've considered

I've struggled to get round this as I am migrating. Before I could use import { Options } from 'embla-carousel/components/options';

Additional context

n/a

[Davy-F]

Nevermind I've stumbled across this: import { EmblaOptionsType } from 'embla-carousel-react';

[davidjerleke]

Hi @Davy-F,

I’m a bit busy now but you can import the same type from the react package. The react package is exporting all types too for convenience. Look here. Example usage:

import { EmblaOptionsType } from 'embla-carousel-react';

Best, David

[Davy-F]

@davidjerleke Cheers for that! I might also need them for components such as AlignmentOptionType, which don't seem to be available. They are in the embla-carousel module though

[davidjerleke]

@Davy-F, alternatively, you could try:

import { EmblaOptionsType } from 'embla-carousel-react';

type SomeType = {
  align: EmblaOptionsType['align']
}

?

[davidjerleke]

@Davy-F I’ve created a guide in the docs that demonstrates usage with TypeScript.

[TheMikeyRoss]

Hi @davidjerleke ,

it seems the typescript guide link you provided doesn't exist.

I looked around https://www.embla-carousel.com/ but couldn't find a typescript guide

[davidjerleke]

@TheMikeyRoss that page was outdated so I had to delete it. I will create a new guide when I get the chance.

[TheMikeyRoss]

Anyway I help with that? I just checked the docs directory and all the html files are hashed, assuming it's generated by a certain tool you're using to generate the content of the docs

[davidjerleke]

@TheMikeyRoss thanks for considering helping out. Yes if you want to help out that would be much appreciated. You can follow these steps:

1. Clone the repository.
2. If you have nvm installed, install the correct node version for the project which is located in .nvmrc.
3. Go to the project root folder and run yarn install.
4. Run yarn build.
5. Start the dev environment for the documentation website by running yarn start.
6. Here under API you can add a new file (page) and name it typescript.mdx.
7. Copy the header structure from an existing page. For example events.mdx.
8. Set the order of the page to 4.
9. You can also scan the existing page and see how the markdown is written to understand how it works.
10. I think it makes sense to add tabs for different wrappers like Vanilla/React/Vue like done here.
11. Both the core library and all wrappers like embla-carousel, embla-carousel-react, embla-carousel-vue and embla-carousel-svelte export types which are located under packages/<package_name>/src/index.ts. For example the embla-carousel-react path is packages/embla-carousel-react/src/index.ts.
12. Don't worry if you "miss" some stuff or similar.

[!NOTE]

• I recently solved a bug related to all exported types for all wrappers (not the core library) #647 that has not been released yet. I will release it soon and the types will start working again.

Best, David