A utility for creating compound components with full TypeScript type safety Build flexible, composable React components with ease
A lightweight, zero-dependency utility for creating compound components in React. Perfect for building design systems and reusable UI components with maximum flexibility and type safety.
## Features
- ð **Full TypeScript Support** - Complete type inference and safety
- ðŠķ **Zero Dependencies** - No external dependencies, just React
- ðĶ **Tiny Bundle** - Minimal footprint, tree-shakeable
- ðŊ **Simple API** - One function to create compound components
- ð **DevTools Friendly** - Proper display names for React DevTools
- ⥠**Performance** - No runtime overhead, just composition
## Installation
```bash
# Using npm
npm install @negiz/compound
# Using yarn
yarn add @negiz/compound
# Using pnpm
pnpm add @negiz/compound
```
## Basic Usage
```tsx
import { createCompound } from '@negiz/compound';
// 1. Define your individual components
function CardRoot({ children, className = '' }) {
return
{children}
;
}
function CardHeader({ children }) {
return {children};
}
function CardBody({ children }) {
return
{children}
;
}
function CardFooter({ children }) {
return ;
}
// 2. Create compound component
const Card = createCompound(
CardRoot,
{
Header: CardHeader,
Body: CardBody,
Footer: CardFooter,
},
{ displayName: 'Card' },
);
// 3. Use it with full flexibility
function App() {
return (
