Pass value to properties panel component

Developers Modeler
1

In the properties-panel-extension example a component is passed when creating a new entry in the panel, specifically here,

export default function(element) {

  return [
    {
      id: 'spell',
      element,
      component: Spell,
      isEdited: isTextFieldEntryEdited
    }
  ];
}

The component can then access the element as follows:

function ZDFTextArea(props) {
    const { element, id } = props;

My question is: how can I pass other values besides element at this point? More specifically, I have a use case in which I have to pick between TextArea, Select and Checkbox, but some code (like fetching the labels) is common to all three. So I would like to be able to calculate that in the default function above and then pass values to the component. Is that possible?

2

Any prop that you set in the entry definition should be passed to the defined component. So when

 return [
    {
      id: "spell",
      element,
      component: Spell,
      isEdited: isTextFieldEntryEdited,
      foo: "bar"
    }
  ];

The foo property will be available in the Spell component.

function Spell(props) {
  console.log(props); // props.foo = "bar"
  // ...
}

Source: properties panel extension custom prop - CodeSandbox

3

Thanks, that works great.