Is it possible to install libraries in custom components via npm install or are their certain limits like a library can’t have dependencies? I’m going through the docs and I’m a bit confused as to the limitations on adding libraries for custom components.
1 Like
Hey @benjaminfortunato! The short answer is yes, you have the ability to freely manage the package dependencies of your custom components.
That said, there may be some packages that don't function correctly due to the fact that they are being executed within an iframe. We don't have an exhaustive list of what does and doesn't work, but running your library in dev mode makes it very easy to test!
I'm really excited about the potential for the new custom components, so don't hesitate to ask if you have any further questions!
Got it. I thought the custom components were native react components in a “retool” wrapper. It sounds like the frame makes sure any dependencies don’t conflict with retool. Essentially the custom components creates its own app and then inserts it into an iframe that behaves like a component? In the dev docs there were methods to pass props and events back from the app to the custom components. This is done under the hood via an api rather than through react? Even though this is an frame it mimics react?
This might introduce some latency? I suppose this also precludes any drag and drop between components.
Are there any video tutorials that go over this process? I think I just need to test this out:)
Pretty much! Each instance of a custom component is essentially its own miniature React app that gets rendered within a separate iframe. And as you suggest, Retool handles the data transfer in and out behind the scenes with the postMessage API. This is still done client-side, though, so there's no significant latency! Drag-and-drop probably won't work, though. 
I don't know of any particularly comprehensive resources off the top of my head, but have some extra time this week and might look into putting something together. Like I said, this is a feature that I'm excited about. I will tag @khill-fbmc just because they're also playing around with custom components right now and might have some insight!
1 Like
I’ll dive in, probably next week. Just to clarify npm works and we don’t need to use a UMD library? I’m getting a lot of conflicted messages in the forum but some of that might be from the older component architecture or creating a component with script tags in retool not the dev environment using the CLI.
I don’t think the libraries we are planning to use all come with UMD. Most of the libraries we use have dependencies that are pulled from the package.json file.
1 Like
Correct! You're probably seeing references to the previous generation of custom component, if I had to guess. When developing using the Custom Component Library feature, you can install packages and generally manage dependencies using npm. 
Thanks! That's a big upgrade. Being limited to UMD was causing me concern about moving forward with Retool.
When creating more than one component can you upload this app and then get access to individual custom components or do you need to create a separate "app" for each component?
The reason I was asking is that if you have multiple components this means you will need to manage dependencies across each of these separate apps which could be time-consuming.
The intended use case is that you manage a whole suite of components via one CCL - Custom Component Library - with a single set of dependencies. Each named export from index.tsx will show up as a separate component in your app pallette.