Connecting Plasmic Dropdown Menu to React useState Hooks

We are working with the dropdown menu in the Plasmic Settings panel, and we’d like to bind its selected values to the state in our React component. Could you guide us on how to locate the dropdown in the code and connect it to the useState hooks we’ve set up?

Hi, how do you want to bind the values more exactly ? You can have the value as a prop that you can pick in the selector and add an event handler that allows you to change the values, you can see how the Select of antd was added in the studio by looking into https://github.com/plasmicapp/plasmic/blob/23cc436ef28db7b5abc5adfc541a11f23f6b89ff/plasmicpkgs/antd5/src/registerSelect.tsx#L142 , https://github.com/plasmicapp/plasmic/blob/23cc436ef28db7b5abc5adfc541a11f23f6b89ff/plasmicpkgs/antd5/src/registerSelect.tsx#L211 and https://github.com/plasmicapp/plasmic/blob/23cc436ef28db7b5abc5adfc541a11f23f6b89ff/plasmicpkgs/antd5/src/registerSelect.tsx#L295

Hi, I want to sync like the ‘color’ state of my component with the dropdown in Plasmic Studio’s settings panel, so that selecting a different option will update the state accordingly.

Is this what the AntD component is doing?

Yes, that’s what AntD component is doing, if your component state is being kept in sync with plasmic studio prop, it’s actually quite similar to registering a prop, but as you also want to have the state functionalities, you need to do some extra registering

Thank you so much! I have successfully registered it!