| 1 | --- |
| 2 | depends: |
| 3 | - guide/global-context |
| 4 | tags: [client-api] |
| 5 | description: | |
| 6 | Hooks to manage the slide lifecycle. |
| 7 | --- |
| 8 | |
| 9 | # Slide Hooks |
| 10 | |
| 11 | Slidev provides a set of hooks to help you manage the slide lifecycle: |
| 12 | |
| 13 | ```ts twoslash |
| 14 | import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client' |
| 15 | |
| 16 | const isActive = useIsSlideActive() |
| 17 | |
| 18 | onSlideEnter((to, from) => { |
| 19 | /* Called whenever the slide becomes active */ |
| 20 | }) |
| 21 | |
| 22 | onSlideLeave((to, from) => { |
| 23 | /* Called whenever the slide becomes inactive */ |
| 24 | }) |
| 25 | ``` |
| 26 | |
| 27 | You can also use <LinkInline link="guide/global-context" /> to access other useful context information. |
| 28 | |
| 29 | ::: warning |
| 30 | |
| 31 | In the slide component, `onMounted` and `onUnmounted` hooks are not available, because the component instance is preserved even when the slide is not active. Use `onSlideEnter` and `onSlideLeave` instead. |
| 32 | |
| 33 | ::: |
| 34 |