react-multiple-image-post-view3/src/App.js

The react-multi-image-post npm package is a versatile solution for developers seeking to integrate multi-image posting or gallery functionality seamlessly into their React application.Whether you're building a social media plateform,an e-commerce site, or

import { Box } from "@mui/material";
import React, { Fragment, useCallback, useState } from "react";
import FirstShape from "../src/components/CarouselShapes/FirstShape";
import SecondShape from "../src/components/CarouselShapes/SecondShape";
import ThirdShape from "../src/components/CarouselShapes/ThirdShape";
import FbLightBox from "../src/components/FbLightBox/FbLightBox";
import "./App.css";

const MultiImagePost = ({ images = [], cover, disablePadding, sharp }) => {

  const [modal, setModal] = useState(false);
  const [index, setIndex] = useState();

  const onClose = useCallback(() => setModal(false), []);

  const openModal = useCallback((index) => {
    setModal(true);
    setIndex(index);
  }, []);

  return (
    <Fragment>
      <Box
        sx={{
          textAlign: "center",
          width: "100%",
          padding: !disablePadding && "10px",
        }}
      >
        {[1, 3, 4].includes(images.length) && (
          <FirstShape
            images={images}
            openModal={openModal}
            cover={cover && images.length === 1}
            coverThreePhotos={cover && images.length === 3}
            sharp={sharp}
          />
        )}
        {images.length >= 2 && images.length !== 4 && (
          <SecondShape
            images={images}
            openModal={openModal}
            sharp={sharp}
            cover={cover && images.length === 2}
          />
        )}
        {images.length >= 4 && (
          <ThirdShape images={images} openModal={openModal} sharp={sharp} />
        )}

        {modal && (
          <FbLightBox
            open={modal}
            onClose={onClose}
            index={index}
            images={images}
          />
        )}
      </Box>
    </Fragment>
  );
};

export default MultiImagePost;