henrygd / bigger-picture

JavaScript lightbox gallery for images, video, audio, iframes, html. Zoomable, responsive, accessible, lightweight.
https://biggerpicture.henrygd.me
MIT License
231 stars 17 forks source link

Ability to pass a custom Svelte render component #47

Open motin opened 5 days ago

motin commented 5 days ago

Similar to how custom html can be supplied, it'd be great to be able to supply a renderComponent attribute, when if defined it would be used instead of Image, Video, Iframe etc. This would make the usage more Sveltish for svelte apps using the library, and prevent one of having to prerender the html for all items upfront.

It'd be a small change, something like rendering the custom component if supplied:

                {#if activeItem.renderComponent}
                    <svelte:component this={activeItem.renderComponent}  props={getChildProps()} {smallScreen} />
                {:else if activeItem.img}
henrygd commented 5 days ago

Good idea. I'm behind on other things so may not have time to look into it in the short term.

As an alternative, you can use an empty string with the html option and mount a component in onOpen. There's an example in the html section of the readme.