Skip to main content

useSurface()

If you decide to write your own component that needs to access the underlying Surface, this hook will be of use.

Usage​

<script>
	import { useSurface } from "@visuallyjs/browser-ui-svelte"
	const surface = useSurface()
</script>
{#if surface != null}
The surface currently has {surface.model.getNodes().length} nodes
{/if}
{#if surface == null}Loading...{/if}

This hook will only return a value if your component is a descendant inside a SurfaceProvider or SurfaceComponent, for instance:

<script>
	import MyComponent from "MyComponent.svelte"
	import { SurfaceProvider, SurfaceComponent } from "@visuallyjs/browser-ui-svelte"
</script>
<SurfaceProvider>
	<SurfaceComponent data={...} options={...}/>
		<MyComponent/>
</SurfaceProvider>