Feature Request: Ability to use custom Image component

As a user, I would love the ability to implement and replace the component for displaying the image itself.

From looking at the available props, I can see that many components are replaceable already. However, I am using this package inside a Gatsby project & would like to be able to leverage their gatsby-image component in combination with this. I know this package already supports having a srcSet of image sizes, however, the Gatsby-image also offers a built in blur-up placeholder, the ability to choose a custom placeholder && most importantly it lets you pass a set of multiple image formats (as well as sizes), so that if the browser supports Webp, it will display that or fallback to a regular jpg format.

Even if a user isn’t using Gatsby, I believe it would be beneficial to give the users the freedom to implement their own image component if they so choose.

This could possibly be achieved by adding a customImageComponent prop that is either a React component or a function that returns a component?

Any thoughts? I am willing to make a PR for this feature.

[addisonElliott]

Sure thing, I had to refresh my memory since it’s been a little while since I’ve been working with React.

First thing, I don’t really have time or the motivation to update the README on my repository with examples of how to use. If you or anyone wants to do that and submit a PR, it would be greatly appreciated I’m sure!

In terms of the big picture, there are two additional properties passed to the Lightbox instance:

1. customImage -> Function, if given, that will be called instead of returning the standard <figure> element. The return value of this function should be the element that should be displayed. I’ll explain the arguments passed to this function in a bit.
2. customPreloadImage -> Function, if given, that will be called to preload images if preloading is enabled. This should return an Image variable that should be preloaded.

The above two functions bypass a lot of the functionality in react-images and allows the developer great flexibility. Now, the best way to learn how to use this is to see an example and so I’ll show you how I used it. Let me start with a background, how I used it, etc before I show you some code.

I wanted to be able to display responsive images at different sizes (the best size picked based on the user’s device) in addition to WebP at different sizes since it is usually much smaller. Furthermore, I even have a few cases where I used this to display videos and it works just fine!

The code in action can be seen at my website: https://www.addisonelliott.net/ If you click on any of the projects listed under the projects section, it will show a lightbox. Each one of those images have multiple sizes, WebP fallback, and some are videos as I said.

Okay, so here’s the relevant code from my website for you to browse: https://gist.github.com/addisonElliott/3a77cc2052a90b9b6d3a097755675b1b

Since I have a lot of images at various sizes and such, I made some helper classes to make the data entry easy. This doesn’t matter for you but I want to explain it so you know what the hell is going on. Starting with the exampleResponsiveImage.js file, this is one image and all the various sizes and image types that are with it. exts shows the supported extensions, widths are the available sizes of the image, src is the path to the image but %w will be replaced with the width and %e with the extension.

I have a whole bunch of those objects that then get passed to a ResponsiveImage class I made. This essentially parses the data and returns a responsive image. This is the relevant HTML part for you, should look familiar: https://gist.github.com/addisonElliott/3a77cc2052a90b9b6d3a097755675b1b#file-responsiveimage-js-L120-L136

From there, I have a Project component that represents each one of the projects listed on my website. This is where the Lightbox is instantiated. You can see here are where I use the two functions I mentioned above: https://gist.github.com/addisonElliott/3a77cc2052a90b9b6d3a097755675b1b#file-projects-js-L316-L317

The customPreloadImage function is used to preload the correct image. For responsive images, there are a lot of different images that can be preloaded, so my function will basically guess what the right sized image is and preload that: https://gist.github.com/addisonElliott/3a77cc2052a90b9b6d3a097755675b1b#file-projects-js-L186-L230 (Note: does nothing for videos, can’t preload those really). The onload parameter is the callback function given by react-images that needs to be called when the image is preloaded. Don’t quote me on this, but I believe the widthOffset and heightOffset are the values that the images are offset from the top-left of the device screen. I think I used this for calculating the maximum size of the image.

The customImage function actually returns the React component for the image (or video): https://gist.github.com/addisonElliott/3a77cc2052a90b9b6d3a097755675b1b#file-projects-js-L140-L184 You can see I instantiate the ResponsiveImage component I explained earlier. There are a lot of parameters to this function. If you don’t know what they are, refer to the source code and it should be explanatory.

Okay, I know that was a lot of information but hopefully that’s enough to get you started.

[neptunian]

If you clone the repo and start it you should be able to bring up the documentation site in the browser. You can replace the View component with your own custom component.