Combine multiple React components (like providers) while maintaining fully typed props support. Up to **10 times faster** than using `cloneElement`.
npm install compose-componentsCombine multiple React components (like providers) while maintaining fully typed props support. Up to 10 times faster than using cloneElement.
``bash`
pnpm install compose-components
`tsx
import { ComposeComponents, composeComponents } from "compose-components";
const App = () => (
[PaletteProvider, { mode: "light" }],
[LayoutProvider, { layout: "default" }],
[TypographyProvider, { font: "sans" }],
)}
>
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;
`
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
> compose-components@0.0.0 benchmark
> pnpm -F "./benchmark" run start
> benchmark@0.0.0 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 ā
āāāāāāāāāāā“āāāāāāāāāāāāāāāāāāāāāāāāā“āāāāāāāāāāāāāā“āāāāāāāāāāāāāāāāāāāā“āāāāāāāāāāā“āāāāāāāāāā
``