Typed factory pipeline for React components

Build components through clean, predictable pipelines

ModularComponent composes React components through a modular factory: add capabilities stage-by-stage, keep concerns isolated, and make testing feel native.

Read the docs Write an extension Install

.with() compose stages.use() generate hooks.stage() isolate for tests

Modular factory pipeline

// install
npm i @modular-component/core @modular-component/default

// register stages (recommended)
import '@modular-component/default/register'
import { ModularComponent } from '@modular-component/core'

export const Counter = ModularComponent<{
  step?: number
}>('Counter')
  .withDefaultProps({ step: 1 })
  .withLifecycle(({ props }) => {
    const [count, setCount] = useState(0)
    return { count, inc: () => setCount(c => c + props.step) }
  })
  .withRender(({ lifecycle }) => (
    <button onClick={lifecycle.inc}>{lifecycle.count}</button>
  ))

What it brings

The factory approach lets you add functionality as the component is built, keeping JSX focused while other stages handle state, wiring, and cross-cutting concerns.

Extensible factory

Compose reusable stages to build consistent components across your codebase.

Delightfully organized

Separate markup, lifecycle/state, and wiring—without losing readability.

Deeply testable

Isolate stages for tests, or turn pipelines into hooks when you don’t need rendering.

How it works

Build a pipeline of ordered stages. Each stage populates a shared argument map for downstream stages.

propsdefaults, validation, adapters

logichooks, state, effects, data

renderfocused JSX, minimal glue

Smart patterns and helpers

.use()

Turn a pipeline into a hook (or isolate a single field).

.stage()

Extract a stage to unit-test it with fully controlled inputs.

/register

Extensions offer a register entrypoint for automatic stage registration.

Get started now

Start with the core factory, add the default stage pack, and add on your custom stages as your app needs.

Install

Core and the recommended default capability pack.

npm install @modular-component/core @modular-component/default

Register stages

Keep component definitions clean with stage registration.

import '@modular-component/default/register'

Define a pipeline

Compose stages with a readable chain and keep JSX at the edge.

const MyComponent = ModularComponent<{ label: string }>()
  .withDefaultProps({ label: 'Hello' })
  .withLifecycle(({ props }) => ({
    upper: props.label.toUpperCase()
  }))
  .withRender(({ lifecycle }) => (
    <h2>{lifecycle.upper}</h2>
  ))

Dive deeper Explore extensions