@threlte/extras
onReveal
onReveal invokes a callback when the component is revealed (i.e., no
longer suspended in the context of a
<Suspense> boundary). It mimics Svelte’s
lifecycle method onMount. If there is no <Suspense> component, the callback
will be executed with Svelte’s onMount as the component will never suspend.
onReveal is mimicking Svelte’s onMount and can be used in
its place for triggering animations, etc., within the boundaries of a
<Suspense> component. If it’s used outside of a <Suspense> component, it
will behave just like Svelte’s onMount.
This means that
Example
The following component loads a model with the hook useGltf and is potentially
wrapped in a <Suspense> boundary.
<script>
import { T } from '@threlte/core'
import { onReveal, useGltf } from '@threlte/extras'
const gltf = useGltf('model.gltf')
onReveal(() => {
console.log('The component has been revealed')
})
</script>
{#await gltf then { scene }}
<T is={scene}>
{/await}You may also return a function from the callback to be executed when the component is unmounted or the component is suspended again.
onReveal(() => {
console.log('The component has been revealed')
return () => {
console.log('The component has been unmounted or suspended again')
}
})