Custom Components using JSX

I wrote a custom component using JSX and React and am trying to figure out how to put it into Retool. I am looking at this documentation: Custom component libraries | Retool Docs . Do I need to convert my component's code to TSX manually? or can I import jsx files into the index.tsx and use them that way? Please help!

Hello @annaliu!

Good thinking going straight to the docs!

We primarily advise users to work with retool components for most use cases unless you have a very specific need for a custom components as they are much more prone to bugs when connecting them with retool apps and components.

Do you mind sharing the primary use case for the custom component you want to build? I might be able to help you find the right retool component to get the job done.

For making a custom component, were you able to clone the Github repository in step 1 and install the node dependencies in step 2?

Since our custom components use the Typescript API, the usual Typescript guard rails for needing to declare types will be applied by the linter. It is highly recommended that you convert the code over to Typescript as type safety will greatly help to reduce errors and bugs down the line.

I have found that some engineers like to use chatGPT to convert JSX/React code to Typescript code for small/manageably sized components.

There are work arounds for persistent typescript error messages, such as going into the .eslintrc.json file to manually turn off linting rules but that becomes more complex and could lead to later uncaught bugs down the line. This would be a last resort measure to get the custom component working.