WithElementRef

A type helper to enable the `ref` prop on a component.

llms.txt

The WithElementRef type helper is a convenience type that enables you to follow the same ref prop pattern as used by Bits UI components when crafting your own.

	type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
  ref?: U | null;
};

This type helper is used internally by Bits UI components to enable the ref prop on a component.

Usage Example

CustomButton.svelte
	<script lang="ts">
  import type { WithElementRef } from "bits-ui";
 
  type Props = WithElementRef<
    {
      yourPropA: string;
      yourPropB: number;
    },
    HTMLButtonElement
  >;
 
  let { yourPropA, yourPropB, ref = $bindable(null) }: Props = $props();
</script>
 
<button bind:this={ref}>
  <!-- ... -->
</button>