@ehsaneha/react-slot

A lightweight and flexible React <Slot> component that merges props and forwards refs to a single child element — inspired by Radix UI’s Slot.

📦 Installation

npm install @ehsaneha/react-slot

Or

yarn add @ehsaneha/react-slot

🚀 Usage

import Slot from "@ehsaneha/react-slot";

<Slot className="bg-blue-500 p-2" onClick={() => console.log("Parent click")}>
  <button onClick={() => console.log("Child click")}>Click me</button>
</Slot>;

✅ What happens:

• Both onClick handlers are triggered
• className and style props are merged
• The ref is forwarded to the child element

✨ Features

• 🔁 Merges className, style, and event handlers
• 🎯 Forwards ref to child DOM or forwardRef component
• 🚫 Rejects React.Fragment and multiple children (with dev warning)
• 🪶 Tiny, dependency-free, and tree-shakable

🧪 Running Tests

npm run test

Covers:

• Prop and style merging
• Ref forwarding
• Invalid child handling
• Event handler composition

🛑 Limitations

• Only accepts one valid React element as a child.
• Ignores and warns about fragments or multiple children.

License

This package is licensed under the MIT License. See LICENSE for more information.

Feel free to modify or contribute to this package!