closeOnBackdropClick doesn't work with custom View

[TomPradat]

Hi, first of all thanks for this great lib :hugs:

So it's not explained in the docs that the closeOnBackdropClick needs the viewer's container and viewer's image to have some classes.

Without this knowledge, when using a custom View component, the closeOnBackdropClick doesn't work.

It would be great to explain this on the docs and provide those classes in the innerProps or so

[onadeem1]

Hi Tom do you mind saying what classes are needed? Thanks

[TomPradat]

I believe you have to add the following class on your View's root element : react-images__view

[chaddjohnson]

I believe you have to add the following class on your View's root element : react-images__view

This does not work with the following:

import React from 'react';
import Img from 'gatsby-image';
import Carousel, { ModalGateway, Modal } from 'react-images';

const GalleryImage = props => {
  return (
    <Img
      className="react-images__view"
      imgStyle={{
        objectFit: 'contain'
      }}
      fluid={props.data}
      alt={props.data.caption}
    />
  );
};

const MyComponent = props => {
  // ...

  return (
    <ModalGateway>
      {modalIsOpen && (
        <Modal onClose={() => setModalIsOpen(false)}>
          <Carousel views={images} components={{ View: GalleryImage }} />
        </Modal>
      )}
    </ModalGateway>
  );
};