React Component Rendering Plugin

The reactPlugin enables using React and standard JSX syntax to create files in Fabric. Brings React component model to code generation.

Use reactPlugin when: You want to use React components and JSX for code generation templates.

Perfect for: React developers, JSX-based templates, familiar React patterns.

Key features:

• Render React components to strings
• Standard JSX syntax support
• Stream output progressively
• Error handling with stderr

Usage

Create and render React components with the react plugin.

Example: Create a React component and render it.

import { createFabric } from '@kubb/fabric-core'
import { reactPlugin } from '@kubb/react-fabric/plugins'

const fabric = createFabric()

fabric.use(reactPlugin)

const App = () => {
  return <div>Hello from React!</div>
}

await fabric.render(App)

Plugin Options

stdout

Output stream for rendered content. If set, output is written progressively.

Type:	NodeJS.WriteStream
Required:	false

example.ts

import { createWriteStream } from 'fs'

fabric.use(reactPlugin, {
  stdout: createWriteStream('./output.txt'),
})

stdin

Configure input and error streams for interactive components:

Type:	NodeJS.WriteStream
Required:	false

example.ts

fabric.use(reactPlugin, {
  stdin: process.stdin,
})

stderr

Configure input and error streams for interactive components:

Type:	NodeJS.WriteStream
Required:	false

example.ts

fabric.use(reactPlugin, {
  stderr: process.stderr,
})

debug

Enable debug mode to log render lifecycle information:

Type:	boolean
Required:	false
Default:	false

example.ts

fabric.use(reactPlugin, {
  debug: true, // Logs render/unmount events
})

Injected Methods

The reactPlugin adds the following methods to the Fabric instance:

render(Fabric)

Renders a React component tree to the terminal and emits the lifecycle:start event.

Example:

app.tsx

const App = () => <div>Building files...</div>

await fabric.render(App)

renderToString(Fabric)

Renders a React component tree and returns the final output as a string without writing to stdout.

Example:

const Template = () => <div>Generated code</div>

const output = await fabric.renderToString(Template)
console.log(output)

waitUntilExit()

Waits until the rendered app exits. Resolves when the component unmounts and emits the lifecycle:end event.

Example:

app.tsx

await fabric.render(App)
await fabric.waitUntilExit() // Wait for app to finish
console.log('App completed')

Examples

CLI Progress UI

Build interactive command-line interfaces that shows a progressbar with React components:

import { createFabric, useEffect, useState } from '@kubb/react-fabric'
import { reactPlugin } from '@kubb/react-fabric/plugins'

const fabric = createFabric()

fabric.use(reactPlugin, { stdout: process.stdout }) // show the output in the terminal

const Progress = () => {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev: number) => Math.min(prev + 10, 100))
    }, 100)
    return () => clearInterval(interval)
  }, [])

  return <>Progress: {progress}%</>
}

await fabric.render(<Progress />)
await fabric.waitUntilExit()

Template Generation

Generate code templates using React components:

import { createFabric} from '@kubb/react-fabric'
import { reactPlugin } from '@kubb/react-fabric/plugins'

const fabric = createFabric()

fabric.use(reactPlugin, { stdout: process.stdout }) // show the output in the terminal

const TypeTemplate = ({ name, fields }: {  name: string; fields: string[] }) => {
  return (
    <>
      export interface {name} {'{'}
      {fields.map(f => (
        <>  {f}: string;</>
      ))}
      {'}'}
    </>
  )
}

await fabric.render(<TypeTemplate name="User" fields={['id', 'name', 'email']} />)
await fabric.waitUntilExit()

See Also

• createFabric - Fabric API reference
• Events - Lifecycle events
• Creating Plugins - Build custom plugins