How do I add custom component to the app?

App Building
1

I followed this documentation and published the component. It's not available in the component palette. Do you need to have a paid version to use this feature?

3

Here is the link: Build custom component libraries | Retool Docs

4

Hi @knightcoder - thanks for reaching out and welcome to the community! :wave:

The ability to build custom components is available to all users. After deploying your component via the command line, you should see something like:

image
image1006×416 61.9 KB

You might need to subsequently refresh the browser, but your library should show up in the "App Settings -> Custom Components" menu. When searching for the component in the palette, it's name will be the same as the named export:

image
image1008×388 28.7 KB

image
image870×388 9.28 KB

Let me know if you're still having challenges with this and I'd be happy to help you figure it out!

5

Hi Darren,

I deployed the component. It succeeded. See the screenshot below.
The custom component shows up on the settings page, like you have it in the first screenshot, but it doesn't show up in the "Components" section. Am I missing something?

image

6

Hi Darren,

I deployed the component. It succeeded. See the screenshot below.
The custom component shows up on the settings page, like you have it in the first screenshot, but it doesn't show up in the "Components" section. Am I missing something?

image.png

Thanks,
Rohit

1 Like
7

Hmm nothing obvious comes to mind. A few things. you can try:

  • refresh the Retool browser page
  • double check that you're exporting the component from /src/index.tsx
  • if you are a member of multiple orgs, check that the retool-ccl library is authenticated with the correct one by running the command npx retool-ccl login again

Run through that checklist and let me know if the issue persists!

8

Ran through it all and still no luck.

9

That seems very odd. :thinking: Are you on a cloud or self-hosted instance? If the latter, which version? Do you see any errors in the Retool and/or browser console when opening the component palette?

10

It's whatever is the latest version of the cloud. Also no errors.

11

I wonder if the size of dist/components.js is an issue. Can you see if it works with the simple template component?

import React from 'react'
import { type FC } from 'react'

import { Retool } from '@tryretool/custom-component-support'

export const HelloWorld: FC = () => {
  const [name, _setName] = Retool.useStateString({
    name: 'name'
  })

  return (
    <div>
      <div>Hello {name}!</div>
    </div>
  )
}
12

Figured out the issue. Looks like Retool expects a named export export const App. I was doing export default App, which didn't work.

1 Like