Slot과 Slottable

Slot은 child element를 clone하고 slot props를 병합합니다. Wrapper component가 실제 child element에 behavior를 전달해야 하는 asChild composition에 유용합니다.

import { Slot } from '@ilokesto/utilinent';

function Button({ asChild, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Component = asChild ? Slot : 'button';
  return <Component className="button" {...props} />;
}

Prop merging

• Event handler는 연결됩니다. Child handler가 먼저 실행되고 그 다음 slot handler가 실행됩니다.
• style object는 merge되며 slot style이 우선합니다.
• className string은 join됩니다.
• 가능한 경우 ref가 compose됩니다.

Slottable

여러 child 중 특정 child 하나만 merged props를 받아야 한다면 Slottable을 사용하세요.

import { Slot, Slottable } from '@ilokesto/utilinent';

<Slot className="trigger">
  <span>Prefix</span>
  <Slottable><a href="/docs">Docs</a></Slottable>
</Slot>

최종 slotted child가 valid React element가 아니면 Slot은 null을 렌더링합니다.