For code components with property controls, I have noticed that when the values of these controls are changed in Plasmic Studio, we can dynamically hide other controls using the “hidden” property, but that doesn’t unset the values of those hidden controls. And when those same controls are visible again, the value(s) they held before being hidden remains.
I’d like to know if there is a way to dynamically update the value held by a property control based of the current values of other controls.
Example: Let’s say I have a dropdown list for “FooType” that shows the options “Foo 1” and “Foo 2” and two other text fields for “Foo 1 Data” and “Foo 2 Data”. It is easy to hide the “Foo 1 Data” control when “Foo 2” is selected from the dropdown, and to hide “Foo 2 Data” control when “Foo 1” is selected. However, I’d like to also unset the value of “Foo 1 Data” when “Foo 2” is selected and unset “Foo 2 Data” when Foo 1" is selected. Is this possible?
For example, I’ve looked at the prop control functions for the “options” property for dropdowns, but this only dynamically populates the list of options of a dropdown based on other conditions/context and not the selected values themselves.
Prop control functions only seem to be available on the following control options:
“validator” and “hidden” (common for all types)
“options” (choice control type)
“min”, “max”, and “step” (number/slider control type)
“options”, “modalTitle”, “showInput”, “onSearch” (cardPicker control type)
But these options don’t seem to do what I need since they cannot change the current value of the code component’s property control.
Additionally, is it possible to trigger such updates to the values of code component property controls in Plasmic Studio from my code component’s code?
For more complex control of your props you can use Custom Prop Controls, which provide an updateValue and componentProps, so it should allow you more customization.
Thanks for the reply! Is it possible to utilize the new customizable components (react-aria) in custom code components - and by extension into custom prop controls? Could you give me some guidance on how to do so? Also, are there any caveats that I should be aware of? Thanks!
That’s a layered question, it’s possible to use the react aria raw components, since this is an integration through code you could to install the package React Aria and then use the components. But there is a difference if you are talking about the Plexus components (Plasmic abstraction on top of React Aria), in that case, I guess you would need to codegen those components into your codebase to be able to use them in your custom controls.
I initially generated my project to use the Headless API. Must I generate a new GitHub repo to codegen those components and copy them into my current codebase?
I’ve read your question again and I realized that my response wasn’t clear. Let me try to clarify it:
I would recommend you try to compose the UI in Plasmic Studio instead of trying to have code components that depend on generated Plasmic Components. You can for example create props/slots to allow you to compose the UI in any way that you want.
This is what my previous response makes more sense, but even then, I would start by just creating the custom prop controls and validating that it’s what you want to then invest more time on it.
I appreciate your clarification. I tried creating a custom prop control using the ‘react-spectrum’ library but I am facing an issue … none of the styles are showing up in Plasmic studio.
To begin, I made sure that Next.js is configured to work with react-spectrum as per documentation here:
And following the Plasmic documentation, I tried wrapping the custom prop controls to provide the necessary contexts for the react-specturm themes/styling but I haven’t been successful.
The react-spectrum component renders correctly - with all CSS styles applied - on a standalone next.js test page (outside the Plasmic studio), so I know next.js is configured correctly.
I’m not sure what else to do. I’ve added my sample code below. Please advise. Thanks!
Next.js config to work with “react-spectrum” (next.config.mjs)
I had already taken a look at that particular documentation, and to my knowledge, “React Spectrum” uses a CSS-in-JS solution that dynamically injects styles into the document. On the standalone Next.js test page I created (outside of Plasmic studio), all the styles for the react-spectrum component were generated in the head of the document. See screenshot below.
