@negiz/compound

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

# Using npm
npm install @negiz/compound

# Using yarn
yarn add @negiz/compound

# Using pnpm
pnpm add @negiz/compound

Basic Usage

import { createCompound } from '@negiz/compound';

// 1. Define your individual components
function CardRoot({ children, className = '' }) {
  return <div className={`card ${className}`}>{children}</div>;
}

function CardHeader({ children }) {
  return <header className="card-header">{children}</header>;
}

function CardBody({ children }) {
  return <div className="card-body">{children}</div>;
}

function CardFooter({ children }) {
  return <footer className="card-footer">{children}</footer>;
}

// 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 (
    <Card className="my-card">
      <Card.Header>
        <h2>Card Title</h2>
      </Card.Header>
      <Card.Body>
        <p>This is the card content.</p>
      </Card.Body>
      <Card.Footer>
        <button>Action</button>
      </Card.Footer>
    </Card>
  );
}

License

MIT