New Dynamic Component

Hi, this is not so much an issue as it is more an idea.

There’s currently no “BackgroundImage” component, which is not the end of the world, but it would be nice to have.

I think it would be possible to create such a component by cloning the “Image” component and storing the URL in a CSS Custom Property. Here’s an example:

const Wrapper = wrapper;

return (
    <Wrapper {...attributes} ref={this.attachRef} style={{ "--url": url }}>
        {children}
    </Wrapper>
 );
...
Dynamic.defaultProps = {
    wrapper: 'div',
};

---

Is that something viable?

[patrick-tolosa]

Hey @fcisio, this feature is unlikely to be developed in the current SDK, however we are working on a new version of the SDK,

You can see more here: https://github.com/cloudinary/cloudinary-js-base

and specifically, a simple example of how to create a URL here https://github.com/cloudinary/cloudinary-js-base/blob/master/__DOC_EXAMPLES__/annotatedExamples/resize.md

We’ve broken down the SDK into two parts, a URL builder and a Framework component (React, Angular Vue etc.) You’ll be able to create custom components using the URL builder, such as the component shown in this thread.

This is not officially released yet, but it’s coming soon!

[idobarnoam]

Hi, @fcisio Thanks for the suggestion!

We’ve opened a request with our dev team to review this as it doe make sense.

We’ll update with any updates about this feature