usePortal

Mount elements to different parts of the DOM.

<script lang="ts">
	import { usePortal } from 'lithesome';
	import { Button, cn } from '$site/index.js';

	const preview = '#tabs-preview';

	let target = $state(preview);
</script>

<Button variant="primary" onclick={() => (target = target === 'main header' ? preview : 'main header')}>
	Portal content
</Button>

<div
	use:usePortal={target}
	class={cn(
		target === 'body' ? 'absolute top-0' : '',
		'rounded-full bg-black px-4 py-1 text-sm text-white dark:bg-white dark:text-black'
	)}
>
	Hi there
</div>

Property	Type	Description
`target`	`'string' \| HTMLElement` `Default: body`	The target element to mount to.

Basic Example

<script>
	import { usePortal } from 'lithesome';
</script>

<div use:usePortal={'#layers'}>
	<!-- content... -->
</div>