Slot

A way to pass content from a parent component to a child component.

• 0.2kb gzipped
• Supports both client & server
• No dependencies

Usage

import { Slot } from "@frend-digital/ui";

interface Props {
  asChild?: boolean;
  children: React.ReactNode;
}

const Wrapper = ({ asChild, children, ...props }: Props) => {
  const Component = asChild ? Slot : "div";
  return (
    <Component onClick={() => console.log("Hello from wrapper")}>
      {children}
    </Component>
  );
};

// In component, link now has onClick

<Wrapper asChild>
  <Link href="/home">Home</Link>
</Wrapper>;