Using custom values in a code input

[g_hadgraft]

Im not sure if the following is possible. I’ve created a symbol with some content Inputs. Using a code symbol within im trying to create an iframe with a src attribute that is based on the symbols content inputs. Is it possible to use them within the editor for the code input for example:

[Stephane]

Yes, it is possible to use content inputs from a symbol within a code block in Builder.io. You can dynamically set attributes, such as the src attribute of an iframe, based on the inputs defined in the symbol.

Step-by-Step Guide:

1. Create a Symbol with Content Inputs:

   • Create your symbol and add the necessary content inputs (e.g., url for the iframe src).

2. Use a Custom Code Block in the Symbol:

   • Within the symbol, use a custom code block to dynamically set the iframe src attribute based on the content inputs.

Example:

1. Create Symbol and Add Content Inputs:

   • Go to the Builder.io Visual Editor and create a symbol.
   • Add a content input named iframeSrc with the appropriate type (e.g., Text).

2. Add Custom Code Block:

   • Drag and drop a custom code block into the symbol.
   • Use Builder’s state management to access the content input and set the iframe src.

const IframeComponent = ({ iframeSrc }) => (
  <iframe
    width="560"
    height="315"
    src={iframeSrc}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
);

// Register the component with Builder.io so it can be used within the editor
Builder.registerComponent(IframeComponent, {
  name: 'Iframe Component',
  inputs: [
    {
      name: 'iframeSrc',
      type: 'url',
      defaultValue: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
      required: true,
      helperText: 'The URL to embed in the iframe',
    },
  ],
});

Adding Dynamic Content in the Custom Code Block:

In your custom code block within the symbol, you can access the content inputs using Builder’s state or props. Here is an example of how to set the src attribute dynamically based on the symbol’s content inputs:

import React from 'react';
import { Builder } from '@builder.io/react';

const IframeWithDynamicSrc = (props) => {
  const { iframeSrc } = props;

  return (
    <div className="iframe-container">
      <iframe
        src={iframeSrc}
        width="100%"
        height="400px"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      ></iframe>
    </div>
  );
};

Builder.registerComponent(IframeWithDynamicSrc, {
  name: 'IframeWithDynamicSrc',
  inputs: [
    {
      name: 'iframeSrc',
      type: 'text',
      defaultValue: '',
      required: true,
      helperText: 'URL to embed in the iframe',
    },
  ],
});

Integrate this in Visual Editor:

1. Add the Custom Component to the Symbol:

   • Within the symbol definition in Builder.io, drag and drop the custom component IframeWithDynamicSrc.

2. Bind the Content Input:

   • Bind the custom component’s iframeSrc prop to the content input defined in the symbol.

Example of Symbol Usage:

When using the symbol in the Builder.io editor, you should now be able to set the URL for the iframe via the content input, and this will dynamically update the src attribute of the iframe in the custom code block.

Summary:

1. Create the Symbol and Define Content Inputs.
2. Use a Custom Code Block to Dynamically Set Attributes.
3. Access the Content Inputs in the Custom Code Block and Use them to Set Attributes.

By following these steps, you can make use of the content inputs within the symbol to dynamically set the src attribute of an iframe or other HTML elements in your custom code.