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!

3 Likes

2 posts were split to a new topic: Possible to render custom content outside the bounds of a custom component?

Just wanted to chime in that I also am looking forward to this feature (adding custom Methods to custom components). My use case is that I have a custom component that's basically an input keeps track of its own data, and, when the containing form is submitted, I want the custom component to do its own processes and be awaitable (like other triggers) so I know when it's done and can use its data in the rest of the Retool app.

Read-only properties would also be nice with this use case: right now the only way to expose data internal to the custom component is by making it publicly settable and gettable, but I have some data I'd like to share with the whole Retool app but only allow the custom component to set.

Not sure if this feature is planned or not, just wanted to throw in my two cents here. Thanks! :slight_smile: