Click on image to get fullscreen

[kidsie-matt]

`import "../../node_modules/react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from "react-image-gallery";
import { useRef } from "react";

const images = [
{
original: "https://picsum.photos/id/1018/1000/600/",
thumbnail: "https://picsum.photos/id/1018/250/150/",
},
{
original: "https://picsum.photos/id/1015/1000/600/",
thumbnail: "https://picsum.photos/id/1015/250/150/",
},
{
original: "https://picsum.photos/id/1019/1000/600/",
thumbnail: "https://picsum.photos/id/1019/250/150/",
},
];
const Carousel = (props) => {
const imageGalleryRef = useRef(null);

const onClickHandler = () => {
imageGalleryRef.current.toggleFullscreen();
};

return (

);
};

export default Carousel;
`

this returns "imageGalleryRef.current.toggleFullscreen is not a function"
but I can run that function from the console and it works, what am I doing wrong?
also is this the best way to implement clicking on the image and going fullscreen?

[HenrikeStahlhut]

So I used a workaround for this, and idk how good this solution is, but it works for me.

I rendered a custom full screen button thats basically as big as the images:

interface FullscreenButtonProps {
  onClick: React.MouseEventHandler;
  isFullscreen: boolean;
}

const FullscreenButton = ({ onClick, isFullscreen }: FullscreenButtonProps) => {
  return isFullscreen ? (
    <CloseFullscreenButton onClick={onClick}>
      <CloseRoundedIcon fontSize="large" />
    </CloseFullscreenButton>
  ) : (
    <OpenFullscreenButton onClick={onClick}></OpenFullscreenButton>
  );
};

const ImageGalleryComponent = ( ) => {
return (
<ImageGallery
        items={images}
        showPlayButton={false}
        showFullscreenButton={true}
        slideDuration={0}
        onScreenChange={handleFullscreenChange}
        stopPropagation={true}
        renderLeftNav={(onClick) => (
          <LeftNav onClick={onClick} disabled={fullscreen} />
        )}
        renderRightNav={(onClick) => (
          <RightNav onClick={onClick} disabled={fullscreen} />
        )}
        renderFullscreenButton={(onClick, isFullscreen) => (
          <FullscreenButton onClick={onClick} isFullscreen={isFullscreen} />
        )}
      />
);
}

const OpenFullscreenButton = styled.button<{ onClick: any }>`
  position: absolute;
  top: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
`;

const CloseFullscreenButton = styled.button<{
  onClick: any;
  children: React.ReactNode;
}>`
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
`;

It's not an answer for your inital error, but maybe this helps to implement it in another way!

[waqas120]

Thanks @HenrikeStahlhut I made some changes in the code and added some styling but your suggestions helped me to achieve the desired result