click on image on react-image-gallery and go fullscreen

Question

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 (
    <ImageGallery
      items={images}
      showThumbnails={true}
      showFullscreenButton={true}
      showPlayButton={false}
      showBullets={true}
      ref={imageGalleryRef}
      onClick={onClickHandler}
    />
  );
};

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?

Answer 1

It should be fullScreen instead of toggleFullscreen. As per the documentation on functions:

The following functions can be accessed using refs

• play(): plays the slides
• pause(): pauses the slides
• fullScreen(): activates full screen
• exitFullScreen(): deactivates full screen
• slideToIndex(index): slides to a specific index
• getCurrentIndex(): returns the current index