(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;
setCounter(newCounter);
props.onClick(newCounter);
}
return (
<SimpleButton
className={className}
label={props.label}
onClick={onClick}
/>
)
}
});