custom component as child rather than array of images as prop

[vshesh]

I'm happy to fork/modify this myself if needed, but I'm wondering if it would be possible to accept custom children components and render those instead of the images. What parts of the Lightbox component would I need to change?

I need to include a few buttons below the image, but I need to pass appropriate callbacks etc.
If there's a way to do that already, please let me know!

[jossmac]

Hi @vshesh,

I recently encountered a similar issue when using this component in a commercial project -- I had to fork the code and adjust it to better suit the client's needs.

I would love for this module to be generic enough that this isn't necessary and would really like any help doing so.

[vshesh]

I just committed a version on my fork that works in a limited sense - it doesn't replicate all the features of the original yet, but it's good enough for what I'm working on (I just wanted the slideshow behavior and to be able to render a custom component).

This version takes 1 child component that will be the parent of the content displayed that receives as a prop the item, which is the currently rendered item.
Some issues I ran into are that it doesn't play nicely with redux in terms of passing through props - you obviously don't want to give all the parent props to the child (that would be unnecessary) but maybe there is a way to give only a part of them? I had to manually insert the store again in my child, which is something you wouldn't want to publish.

[vshesh]

one question as i attempt to regain feature parity - how are you styling the images such that they always fit the box?
I put an image as a subcomponent of a larger div and i'm having difficulty with this, even to the point of trying out javascript solutions - I know I can do this with css, per this jsbin:

http://jsbin.com/jejaveheni/edit?html,css,output

that image will not go outside the red area no matter what you do, but trying to replicate that in the modal dialog of this component fails.
I wonder if I should 'prune' some of the default styling - but I don't know what would be removable.

[jossmac]

I guess this would be the first problem with passing through a custom component, rather then generating an <img /> from props.

The image has specific styles to allow the responsive behaviour.

[GregoryPotdevin]

Quick question, should we be able to pass components as children or should it just have a "renderer" prop that is called instead of the default image rendering ?

@vshesh can you post an image of what your custom fork looks like to see how it could be achieved without having to fork the project ?

If you are willing to use a plain div with background-image: url instead of an img tag I think the styles could be easier to manipulate (just have the div fill the modal and use background-size: contain)

[vshesh]

Here's the idea - the image is bordered with some information (capture time and name) and there are two buttons (check and x) that have callbacks and perform actions somewhere else within the app.

[jossmac]

Ref #87

As mentioned by @GregoryPotdevin we'll likely implement a "renderer" in the form of an imageComponent prop, which will replace the content block (everything but the header and arrows).

[neptunian]

@jossmac @GregoryPotdevin could custom components support other content like video (#163)?

[GregoryPotdevin]

Not sure what the current state is, but in theory you could imagine that the custom component would receive all properties from the selected item, and not just the src/srcSet/captions. In that case you could render pretty much anything, and see react-images as something that handles thumbnail previews and left/right arrows buttons.

[neptunian]

@GregoryPotdevin the state is nothing but i'm cleaning up a lot of issues that ultimately point to this one. i think its the way forward. there are too many requests for custom things that i don't think is the job of this library. i enabled a custom (image) component for react-photo-gallery and the gallery has a lot more potential now.

[jossmac]

Resolved by component architecture in v1 #199