Prop Object in ui

Technical Questions
1

Hello, I have a prop that receives an object like this:
ctaProps: t.shape({
text: t.string.isRequired,
url: t.string.isRequired,
variant: t.oneOf([‘primary’, ‘info’, ‘dark’, ‘light’, ‘warning’])
})
is it possible to pass this via builder.io ui?

2

Hey @Igor, welcome to the forum!

You can accomplish this using type: 'object', e.g. see an example of the source code of our Carousel component using that type here

A full example of what you are going for:

Builder.registerComponent(MyComponent, {
  name: 'MyComponent',
  inputs: [
    {
      name: 'ctaProps',
      type: 'object',
      /* Important, you will get errors if no `defaultValue` is set for objects */
      defaultValue: {},
      subFields: [
        {
          name: 'text',
          type: 'string',
          required: true,
        },
        {
          name: 'url',
          type: 'url',
          required: true,
        },
        {
          name: 'variant',
          type: 'string',
          defaultValue: 'primary',
          enum: ['primary', 'info', 'dark', 'light', 'warning'],
        },
      ],
    },
  ],
});
3

It worked, thanks, it would be interesting to update the documentation of the supported types, I was basing myself there https://www.builder.io/c/docs/custom-react-components#input-types

1 Like