Skip to main content
The makeComponent function creates reusable components from functions, allowing you to define custom components that can be used throughout your application. 
makeComponent(_: (props: {}, children: Component[]) => Component): (props?: {}, children?: Component[]) => Component

​
Parameters

  • _ - A function that receives props and children parameters and returns a Component

​
Returns

Returns a component function that can be called with optional props and children to render the component.

​
Usage

​
Creating a simple component

const Greeting = makeComponent((props, children) => {
  return Text(`Hello, ${props.name}!`)
})

// Usage
Greeting({ name: "World" })

​
Creating a component with children

const Card = makeComponent((props, children) => {
  return VStack([
    Text(props.title).font("headline"),
    ...children
  ])
    .background(Color("white"))
    .cornerRadius(8)
    .padding(16)
})

// Usage
Card(
  { title: "My Card" },
  [
    Text("Card content here"),
    Button("Action", () => {})
  ]
)

​
Component with state

const Counter = makeComponent((props, children) => {
  const [count, setCount] = useState(props.initialValue || 0)

  return VStack([
    Text(`Count: ${count}`),
    HStack([
      Button("-", () => setCount(count - 1)),
      Button("+", () => setCount(count + 1))
    ])
  ])
})

// Usage
Counter({ initialValue: 10 })

​
Notes

  • Each component created with makeComponent gets a unique internal index for tracking
  • Components can use hooks like useState and access the environment
  • The component function receives props and children as parameters
  • Components are automatically wrapped in tracking directives for debugging
  • For more advanced component definitions with metadata and properties, use defineComponent instead