Skip to content

Commit

Permalink
Merge pull request #836 from meirroth/patch-1
Browse files Browse the repository at this point in the history 
chore(docs): note about reactive options
  • Loading branch information
@davidjerleke
davidjerleke committed Apr 28, 2024
2 parents baf030b + 2792f02 commit 5ae8348
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 43 deletions.
24 changes: 12 additions & 12 deletions packages/embla-carousel-docs/src/content/pages/api/events.mdx
View file
Expand Up @@ -66,7 +66,7 @@ export function EmblaCarousel() {

```html highlight={12}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue()
Expand All @@ -75,7 +75,7 @@ export function EmblaCarousel() {
console.log(emblaApi.slidesInView())
}
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInView)
})
Expand All @@ -87,7 +87,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={13}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
Expand All @@ -97,7 +97,7 @@ export function EmblaCarousel() {
console.log(emblaApi.slidesInView())
}

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.on('slidesInView', logSlidesInView)
})
Expand Down Expand Up @@ -180,7 +180,7 @@ export function EmblaCarousel() {

```html highlight={9}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue()
Expand All @@ -190,7 +190,7 @@ export function EmblaCarousel() {
emblaApi.off('slidesInView', logSlidesInViewOnce)
}
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInViewOnce)
})
Expand All @@ -202,7 +202,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={9}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
Expand All @@ -213,7 +213,7 @@ export function EmblaCarousel() {
emblaApi.off('slidesInView', logSlidesInViewOnce)
}

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.on('slidesInView', logSlidesInViewOnce)
})
Expand Down Expand Up @@ -313,7 +313,7 @@ export function EmblaCarousel() {

```html highlight={3,10}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'
import emblaCarouselVue from 'embla-carousel-vue'
Expand All @@ -326,7 +326,7 @@ export function EmblaCarousel() {
console.log(`Embla just triggered ${eventName}!`)
}
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.on('slidesInView', logEmblaEvent)
})
Expand All @@ -346,7 +346,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={2,10}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'
import createEmblaCarousel from 'embla-carousel-solid'

Expand All @@ -360,7 +360,7 @@ export function EmblaCarousel() {
console.log(`Embla just triggered ${eventName}!`)
}

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.on('slidesInView', logEmblaEvent)
})
Expand Down
16 changes: 8 additions & 8 deletions packages/embla-carousel-docs/src/content/pages/api/methods.mdx
View file
Expand Up @@ -58,12 +58,12 @@ export function EmblaCarousel() {

```html highlight={8}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue()
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) console.log(emblaApi.value.slideNodes())
})
Expand All @@ -75,13 +75,13 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={9}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
const [emblaRef, emblaApi] = createEmblaCarousel()

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) console.log(api.slideNodes())
})
Expand Down Expand Up @@ -167,7 +167,7 @@ export function EmblaCarousel() {

```html highlight={3,8}
<script setup lang="ts">
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import { EmblaCarouselType } from 'embla-carousel'
import emblaCarouselVue from 'embla-carousel-vue'
Expand All @@ -177,7 +177,7 @@ export function EmblaCarousel() {
console.log(emblaApi.slidesInView())
}
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInView)
})
Expand All @@ -197,7 +197,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={2,8}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import { EmblaCarouselType } from 'embla-carousel'
import createEmblaCarousel from 'embla-carousel-solid'

Expand All @@ -208,7 +208,7 @@ export function EmblaCarousel() {
console.log(emblaApi.slidesInView())
}

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.on('slidesInView', logSlidesInView)
})
Expand Down
112 changes: 106 additions & 6 deletions packages/embla-carousel-docs/src/content/pages/api/options.mdx
View file
Expand Up @@ -88,12 +88,6 @@ export function EmblaCarousel() {
</TabsItem>
</Tabs>

<Admonition>
Note that it's possible to **change options** passed to the Embla Carousel
constructor **after initialization** with the [reInit](/api/methods/#reinit)
method.
</Admonition>

### Global options

Setting **global options** will be applied to **all carousels** which will override the Embla default options with your own. In the following example [loop](/api/options/#loop) is set to `true`:
Expand Down Expand Up @@ -179,6 +173,112 @@ export function EmblaCarousel() {
code and unexpected behaviour.
</Admonition>

### Changing options

It's possible to **change options** passed to the Embla Carousel constructor **after initialization** with the [reInit](/api/methods/#reinit) method.

In [React](/get-started/react/), [Vue](/get-started/vue/), [Solid](/get-started/solid/) and [Svelte](/get-started/svelte/) wrappers you can pass **reactive options** and the carousel will automatically reinitialize when they change. Here are some examples:

<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
<TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>

```js highlight={6}
import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const emblaApi = EmblaCarousel(emblaNode, { loop: true })

emblaApi.reInit({ loop: false })
```

</TabsItem>
<TabsItem tab={TABS_LIBRARY.TABS.REACT}>

```jsx highlight={5,9-12}
import { useState, useCallback } from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
const [options, setOptions] = useState({ loop: true })
const [emblaRef, emblaApi] = useEmblaCarousel(options)

const toggleLoop = useCallback(() => {
setOptions((currentOptions) => ({
...currentOptions,
loop: !currentOptions.loop
}))
}, [])

// ...
}
```

</TabsItem>
<TabsItem tab={TABS_LIBRARY.TABS.VUE}>

```html highlight={4,8-11}
<script setup>
import emblaCarouselVue from 'embla-carousel-vue'
const options = ref({ loop: true })
const [emblaRef, emblaApi] = emblaCarouselVue(options)
function toggleLoop() {
options.value = {
...options.value,
loop: !options.value.loop
}
}
// ...
</script>
```

</TabsItem>
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={5,9-12}
import { createSignal } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
const [options, setOptions] = createSignal({ loop: true })
const [emblaRef] = createEmblaCarousel(() => options())

function toggleLoop() {
setOptions((currentOptions) => ({
...currentOptions,
loop: !currentOptions.loop
}))
}

// ...
}
```

</TabsItem>
<TabsItem tab={TABS_LIBRARY.TABS.SVELTE}>

```html highlight={7-10}
<script>
import emblaCarouselSvelte from 'embla-carousel-svelte'
let options = { loop: true }
function toggleLoop() {
options = {
...options,
loop: !options.loop
}
}
</script>

<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
```

</TabsItem>
</Tabs>

### TypeScript

The `EmblaOptionsType` is obtained directly from the **core package** `embla-carousel` and used like so:
Expand Down
16 changes: 8 additions & 8 deletions packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
View file
Expand Up @@ -348,13 +348,13 @@ export function EmblaCarousel() {

```html highlight={9}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import Autoplay from 'embla-carousel-autoplay'
const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()])
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.plugins().autoplay.stop()
})
Expand All @@ -367,7 +367,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={12}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'
import Autoplay from 'embla-carousel-autoplay'

Expand All @@ -377,7 +377,7 @@ export function EmblaCarousel() {
() => [AutoPlay()]
)

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.plugins().autoplay.stop()
})
Expand Down Expand Up @@ -464,7 +464,7 @@ export function EmblaCarousel() {

```html highlight={13}
<script setup>
import { watchEffect } from 'vue'
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import Autoplay from 'embla-carousel-autoplay'
Expand All @@ -474,7 +474,7 @@ export function EmblaCarousel() {
console.log(`Autoplay just triggered ${eventName}!`)
}
watchEffect(() => {
onMounted(() => {
if (emblaApi.value) emblaApi.value.on('autoplay:stop', logPluginEvent)
})
Expand All @@ -486,7 +486,7 @@ export function EmblaCarousel() {
<TabsItem tab={TABS_LIBRARY.TABS.SOLID}>

```jsx highlight={17}
import { createEffect } from 'solid-js'
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'
import Autoplay from 'embla-carousel-autoplay'

Expand All @@ -500,7 +500,7 @@ export function EmblaCarousel() {
console.log(`Autoplay just triggered ${eventName}!`)
}

createEffect(() => {
onMount(() => {
const api = emblaApi()
if (api) api.on('autoplay:stop', logPluginEvent)
})
Expand Down
2 changes: 2 additions & 0 deletions packages/embla-carousel-docs/src/content/pages/get-started/react.mdx
View file
Expand Up @@ -11,6 +11,8 @@ import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

# React

Embla Carousel provides a wrapper for [React](https://react.dev/) that ensures seamless integration of the carousel into your React project and automatic cleanup on component unmount.

Start by installing the Embla Carousel **npm package** and add it to your dependencies.

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
Expand Down

0 comments on commit 5ae8348

Please sign in to comment.