How to control custom component from another component?

Hi - I have a custom component library I've built with the "new" way and it's working pretty well, I can get data from my app into the custom component and add event handlers to the custom component to control other components or run queries.

Now I'm wondering how to do the opposite - control the custom component from another component. E.g. when I select a row in a table, run some logic in the custom component.

Is this possible now?

Hey @JaredStufft! Thanks for reaching out. I'm excited to to see more and more users explore the utility of the new custom component library.

I don't think there's a native way to implement the kind of thing you're asking about, but there's definitely a decent workaround! The basic idea is that the callback passed into useEffect gets triggered whenever there are changes to variables specified in the dependency array:

image

By taking advantage of this fact, you can deterministically trigger activity within the custom component just by changing the value of the trigger input variable.

I hope that helps! Let me know if you have any questions about the full implementation. :+1:

I was actually just attempting to figure out the same thing. Is there a way to directly set an input on my custom component from an event handler on another component, or do I have to set a variable then pass that variable into my custom component? Are there any plans to implement something along the lines of the ability to control component options (in the screenshot, googleMaps2 is my custom component)? Thanks!

image

Hey @cpolanish! You have the right idea. :+1: The best way to do this currently is to use a variable as a sort of middleman that you set in the event handler and read in your custom component.

I'll have to talk to the team to see if defining an API for each custom component is on the roadmap. If it's not already there, I do think it's a reasonable ask and will kick off that internal conversation!