Skip to main content

Slot

주어진 Props를 직계 자식 컴포넌트에 병합하는 컴포넌트입니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
const Slot: React.ForwardRefExoticComponent<
  React.HTMLAttributes<HTMLElement> & {
    children?: React.ReactNode;
  } & React.RefAttributes<HTMLElement>
>;
typescript
const Slottable: ({ children }: React.PropsWithChildren) => JSX.Element;

Usage​

typescript
import { Slot } from '@modern-kit/react'

// Basic
const Button = ({
  asChild,
  ...props
}: PropsWithChildren<{ asChild?: boolean } & ComponentProps<'button'>>) => {
  const Comp = asChild ? Slot : 'button';

  return <Comp {...props} />;
};
typescript
// with Slottable
const SlottableButton = ({
  asChild,
  leftElement,
  rightElement,
  ...props
}: PropsWithChildren<
  {
    asChild?: boolean;
    leftElement: ReactElement;
    rightElement: ReactElement;
  } & ComponentProps<'button'>
>) => {
  const Comp = asChild ? Slot : 'button';

  return (
    <Comp {...props}>
      {leftElement}
      <Slottable>{props.children}</Slottable>
      {rightElement}
    </Comp>
  );
};

Basic​

typescript
// Basic Usage
<Button onClick={() => console.log('click')}>Button</Button>

AsChild​

typescript
// AsChild Usage
<Button asChild onClick={() => console.log('click')}>
  <div>asChild Button</div>
</Button>
asChild Button

Slottable​

typescript
<SlottableButton leftElement={<span>left</span>} rightElement={<span>right</span>}>
  <span> Slottable Button </span>
</SlottableButton>