How can I extend the <Image> from basic to develop <NewImage>?

General
1

I’ve encountered an issue where I want to use the Image component from the basic library, but I want to add some options to it and create a new “New Image” component that retains all the functionalities of the original Image component. How can I achieve this? I couldn’t find the solution by looking at the source code.

1 Like
2

Hi,

My name is Veronika and I am a Customer Engineer here at Builder.io. Thank you for your question on our forum!

To extend the <Image> component from the basic library and develop a <NewImage> component with additional functionalities, you can follow a process similar to creating a custom component and registering it. Here is a great doc that might help. Here’s another doc that walks you through registering custom components.

I can also walk you through how you would do that here:

First, create your custom component. Define your new component by extending the existing <Image> component and adding any new functionalities you may want.

Here is some example code I used but feel free to customize it in any way that you need.

import React from "react";
import Image from "next/image"; 

export const NewImage = (props) => {
  return (
    <div>
      <Image {...props} />
    </div>
  );
};

Then, make sure that you register the custom component with Builder. It is important to register your component so that it can be used in the Visual Editor. That is done in the builder-registry file in your codebase. Here’s that doc if you need a little more information on this.

Here’s an example of what that would look like:

Builder.registerComponent(NewImage, {
  name: "NewImage",
  inputs: [
    { name: "imageSrc", type: "string", defaultValue: "" },
  ],
});

Lastly, add that component to your application. You can replace the usage of the old <Image> component in your App with the new <NewImage> component and it should be ready for use!

If you’d like your component to be available in only certain models in Builder, you can specify that as well. Here’s some helpful documentation on how to do that.

Let me know if you have any further questions!

Thank you.

3

Screenshot 2024-10-18 at 11.31.27
Screenshot 2024-10-18 at 11.31.27638×582 16.7 KB

Sorry, I didn’t mean how to develop a custom component. What I want is based on the <Image> from the image above. I need all its functionalities, but I also want to add some additional options to it to develop such a <NewImage> .

4

Hi,

Thank you for getting back to us!

Just to confirm - my understanding is that you’d like to create a custom component that extends the functionality of an already existing <Image> component. Please let me know if that is correct!

In order to do that, it’s very similar to the steps above. Firstly, you’ll need to define your new component which will extend the functionality of the existing <Image> component.

I’m going to give you an example of some React code using the GEN1 SDK that I was able to get from a helpful doc found here.

Step 1: Define your custom component that extends the functionalities of the Image component.

import React from 'react';

const NewImage = (props) => {
  return (
    <div>
      {/* Extending the Image component */}
      <img src={props.src} alt={props.alt} style={props.style} />
      {/* Additional functionality, such as a caption */}
      {props.caption && <p>{props.caption}</p>}
    </div>
  );
};

export default NewImage;

Step 2: Register your component and add the enhanced properties to it. You can pass additional styles and props as needed/ you see fit.
You can also customize the inputs as needed to enhance the <NewImage> component.

import Builder from '@builder.io/react';
import NewImage from './NewImage'; 

Builder.registerComponent(NewImage, {
  name: 'NewImage',
  inputs: [
    {
      name: 'src',
      type: 'file',
      allowedFileTypes: ['jpeg', 'png', 'gif'],
      helperText: 'Upload your image file.',
    },
    {
      name: 'alt',
      type: 'string',
      helperText: 'Alternative text for the image.',
    },
    {
      name: 'caption',
      type: 'string',
      helperText: 'Caption for the image.',
    },
    // Here, add more custom inputs as needed or you see fit
  ],
});

Step 3: Lastly, you can now Integrate this component into your application and you should be able to see this component show up in your Builder UI.

Please let me know if you were able to try this and if my understanding is correct!

Let me know if you have any further questions,

Thank you.