(Optional) Extend a component

You can extend your component to include more functionality (e.g. to emit an internal state from your component). To do this, add the render option to registerComponent().
This example is a Simple Button component extension with a counter property (shown in the UI as a node), which tracks how many times the button is clicked:
The following sample code shows how to extend the Simple Button component to include the counter:
Note: If you update the code in the index.tsx file while testing the component, Uiflow automatically picks up the changes and updates all instances of the component. For more information, see Test a component.
import * as React from 'react';
import { PropType, registerComponent } from '@uiflow/cli';
// ...
export default registerComponent('my-ui-component', {
name: 'Simple Button',
props: [
// ...
name: 'onClick',
type: PropType.Event,
arguments: [
name: 'counter',
type: PropType.Number,
onEmit({ args, emit }) {
// The `newCounter` is passed as the first argument of `props.onClick`
const newCounter = args[0];
// Specify the event name and arguments to emit
emit('onClick', { counter: newCounter });
render({ props, className }) {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
const newCounter = counter + 1;
return (