Function useEnhancer

Bind any Hydrateless enhancer to an element for its lifetime. This is the one low-level escape hatch the Svelte package offers, and every component in it is built on the same call, so custom wrappers behave exactly like the shipped ones.

getOptions is read inside the attachment, so any reactive state it touches re-runs the enhancer (destroy, then enhance again with the fresh options). Wrap values that should only seed the initial state, such as a bound value passed as defaultValue, in untrack to keep them from retriggering it. Callbacks are invoked later, outside the attachment, so reading props inside them doesn't track. Options left undefined are dropped so the enhancer's own defaults apply.

<script lang="ts">
  import { enhanceTabs } from '@hydrateless/enhancers';
  import { useEnhancer } from '@hydrateless/svelte';

  const tabs = useEnhancer(enhanceTabs, () => ({ activation: 'automatic' }));
  // tabs.api?.setValue('two');
</script>

<div data-hl-tabs {@attach tabs.attach}>...</div>
Copy