https://github.com/rel1cx/compose-components

Combine multiple React components (like providers) while maintaining fully typed props support. Up to 10 times faster than using cloneElement.
https://github.com/rel1cx/compose-components

Last synced: 3 months ago
JSON representation

Combine multiple React components (like providers) while maintaining fully typed props support. Up to 10 times faster than using cloneElement.

• Host: GitHub
• URL: https://github.com/rel1cx/compose-components
• Owner: Rel1cx
• License: mit
• Created: 2024-08-12T18:50:18.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-11T23:26:12.000Z (3 months ago)
• Last Synced: 2024-09-12T09:35:03.613Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 230 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# compose-components

Combine multiple React components (like providers) while maintaining fully typed props support. Up to **10 times faster** than using `cloneElement`.

## Installation

```bash

pnpm install compose-components

```

## Usage

```tsx

import { ComposeComponents, composeComponents } from "compose-components";

const App = () => (

  

    
App

  

);


declare function PaletteProvider({ children }: React.PropsWithChildren<{ mode: "light" | "dark" }>): React.ReactNode;

declare function LayoutProvider({ children }: React.PropsWithChildren<{ layout: "default" | "full" }>): React.ReactNode;

declare function TypographyProvider({ children }: React.PropsWithChildren<{ font: "sans" | "serif" }>): React.ReactNode;

```

## Performance

Since `cloneElement` is not used, this approach is nearly **10x** faster than the version that uses `cloneElement`.

```bash

compose-components [ main][+][📦 v0.0.0][ v22.6.0]

❯ pnpm benchmark

> [email protected] benchmark

> pnpm -F "./benchmark" run start

> [email protected] start compose-components/benchmark

> tsx ./main.tsx

┌─────────┬────────────────────────┬─────────────┬───────────────────┬──────────┬─────────┐

│ (index) │ Task Name              │ ops/sec     │ Average Time (ns) │ Margin   │ Samples │

├─────────┼────────────────────────┼─────────────┼───────────────────┼──────────┼─────────┤

│ 0       │ 'with cloneElement'    │ '222,705'   │ 4490.229389930139 │ '±0.25%' │ 66812   │

│ 1       │ 'without cloneElement' │ '2,049,821' │ 487.8472469985147 │ '±0.35%' │ 614947  │

└─────────┴────────────────────────┴─────────────┴───────────────────┴──────────┴─────────┘

```