Passing custom props to the settings component

[mayurarora0903]

Hi, I was going through the examples and was trying to build a page builder for myself. I think this one has some very solid use-cases. The documentation is pretty exhaustive and helpful, but I am stuck with trying to achieve one thing.

Can I get some help with the way the settings panel renders the right settings component here - https://craft.js.org/r/docs/0.1.0-beta.6/guides/basic-tutorial/#settings-panel-1?

Essentially, I am trying to pass in some custom props while creating the element, but it doesn't seem to work. Say, for e.g.

{ selected.settings && React.createElement(selected.settings, {foo:'bar'}) }

My settings component does not receive 'foo' as a prop. This seems to be happening here - https://github.com/prevwong/craft.js/blob/develop/packages/core/src/utils/createNode.ts#L136

[jbbelcher53]

craft.js/examples/landing/components/selectors/Button/index.tsx

Line 71 in 7aefcc8

toolbar: ButtonSettings,

craft.js/examples/landing/components/editor/Toolbar/index.tsx

Line 18 in 7aefcc8

{active && related.toolbar && React.createElement(related.toolbar)}

If I am understanding your question correctly do you mean like this? You can pass whatever you need inside of props and if you need another section outside of props in your component.craft you would put

Component.craft = {
display name: "Component"
props: {...},
custom: {
settings: {
foo: bar
},
},
related: {
toolbar: ButtonSettings,
customBar: ButtonCustomSettings
}
}

And you'd make a new section like toolbar called customBar in this case and in the index.ts for it you'd do this:
{active && related.customBar && React.createElement(related.customBar)}

Then in like you have your ButtonSettings you'd also have a ButtonCustomSettings but instead of using the props from the .craft you'd get the custom object ex:

const {nodeCustomSettings} = useNode(node => ({
nodeCustomSettings: node.data.custom.settings
})
And map over nodeCustomSettings to make sections and items just like the toolbar

[mayurarora0903]

Hi @jbbelcher53 thank you for responding to this. I get what you're saying, we can pass in any component in the related object and have it rendered on demand.
What I was trying to do is pass props to 'related.toolbar' here

craft.js/examples/landing/components/editor/Toolbar/index.tsx

Line 18 in 7aefcc8

{active && related.toolbar && React.createElement(related.toolbar)}

Suppose the parent Toolbar had some state and wanted to pass a handler to 'related.toolbar', something like

{active && related.toolbar && React.createElement(related.toolbar, {handler:callbackIntheToolbar})}

[mayurarora0903]

I can see a PR trying to achieve this - #233