Merges any properties to the element directly below it.

About

This component is a clone of the Slot component developed and maintained by Radix UI.

It is included in our library to keep component imports consistent and to make it easier to work with dependent components.

Installation

pnpm

pnpm add @inpulse-ui/slot

bun

bun add @inpulse-ui/slot

yarn

yarn add @inpulse-ui/slot

npm

npm install @inpulse-ui/slot

Usage

1. Create an element with slots

   Use a simple Slot to create your own asChild API.

   import { Slot } from "@inpulse-ui/slot";
   
   function Button({ asChild, ...props }) {
     const Comp = asChild ? Slot : 'button';
     return <Comp {...props} />;
   }

   If your component has multiple childrens, use Slottable. This way it will be possible to pass the properties to the correct element.

   import { Slottable } from "@inpulse-ui/slot";
   
   function Button({ asChild, leftElement, rightElement, ...props }) {
     const Comp = asChild ? Slot : 'button';
     return (
       <Comp {...props}>
         {leftElement}
         <Slottable>{children}</Slottable>
         {rightElement}
       </Comp>
     );
   }

2. Apply your element

   import { Button } from './your-button';
   
   export default () => (
     <Button asChild>
       <a href="/contact">Contact</a>
     </Button>
   );