Slot 🎰

Hey Component Customizer! 🛠️

The slot module (often providing a Slot component or a useSlot hook) is a clever utility that allows a component to "pass down" its props to its direct child element, effectively "slotting" the child into its own rendering logic. This is a key ingredient in making highly composable and flexible components, especially when used with the asChild prop pattern seen in @ryvora/react-primitive.

It's like having a special placeholder in your component that your users can fill with their own custom content, which then inherits the parent's behavior! 🧩➡️🎁

The Magic of asChild

When a component like Primitive.button receives an asChild prop, it doesn't render its own button tag. Instead, it clones its single React child element, merging its own props (like event handlers or ARIA attributes) with the child's props. The Slot utility is often what powers this merging and cloning behavior internally.

Conceptual Usage (Often Internal to Primitives)

// Simplified example of how a Primitive might use Slot internally
import { Slot } from '@ryvora/react-slot'; // Or it might be an internal utility

const MyPrimitiveButton = React.forwardRef(({ asChild, children, ...props }, forwardedRef) => {
  const Comp = asChild ? Slot : 'button'; // If asChild, use Slot, else render a button
  return (
    <Comp ref={forwardedRef} {...props}>
      {children}
    </Comp>
  );
});

// User consuming MyPrimitiveButton with asChild:
function App() {
  return (
    <MyPrimitiveButton asChild onClick={() => console.log('Clicked wrapped link!')}>
      <a href="#">This link will behave like MyPrimitiveButton!</a>
    </MyPrimitiveButton>
  );
}

Unlock ultimate composability and flexibility in your component APIs! 🔗✨