Documentation
Slot

Slot

Bundle size
699 B
0.3.0

Merges any properties to the element directly below it.

Installation

pnpm add @inpulse-ds/slot

Uso

Create an element with slots

Use a simple Slot to create your own asChild API.

// your-button.jsx
import { Slot } from "@inpulse-ds/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.

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

Apply your element

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