@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')
  }
})