DEV Community: Sanjana Kumari

Image gallery with modal functionality using Next.js, TypeScript, and Tailwind CSS

Sanjana Kumari — Mon, 26 Feb 2024 20:53:22 +0000

Introduction:

In this beginner-friendly tutorial, we'll embark on an exciting journey to create a simple yet elegant image gallery with modal functionality using Next.js, TypeScript, and Tailwind CSS. By the end of this guide, you'll have a visually appealing gallery that you can seamlessly integrate into your Next.js projects.

Setting Up the Project:

Make sure you have Node.js installed. Then, create a new Next.js project with TypeScript by running:

npx create-next-app@latest my-image-gallery --ts

Creating the Image Gallery:

Now that our project is set up, let's start crafting our image gallery component. Within the pages directory, create a new file named index.tsx and fill it with the following code:

export default function ImageGallery() {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  const [images, setImages] = useState<ImageProps[]>([]);

  useEffect(() => {
    // Initialize image data
    setImages([
      { src: img1Path, alt: "Image 1" },
      // Add other images here...
    ]);
  }, []);

const handleNext = () => {
    const nextIndex =
      selectedIndex === images.length - 1 ? 0 : selectedIndex + 1;
    setSelectedImage(images[nextIndex].src as string);
    setSelectedIndex(nextIndex);
  };

  const handlePrev = () => {
    const prevIndex =
      selectedIndex === 0 ? images.length - 1 : selectedIndex - 1;
    setSelectedImage(images[prevIndex].src as string);
    setSelectedIndex(prevIndex);
  };

  return (
    <div className="flex flex-wrap justify-center w-3/5 mx-auto">
      {images.map((image, index) => (
        <div key={index} className="w-1/3 p-2 " style={{ maxWidth: "320px" }}>
          <Image
            {...image}
            width={320}
            height={200}
            priority
            className=" border-4 border-solid border-purple-800 hover:border-purple-500"
            onClick={() => handleOnClicked(image.src as string, index)}
          />
        </div>
      ))}

      {selectedImage && (
        <ModalComponent
          images={images}
          selectedImage={selectedImage}
          onClose={handleCloseModal}
          onNext={handleNext}
          onPrev={handlePrev}
          selectedIndex={selectedIndex}
        />
      )}
    </div>
  );
};

Creating the Modal Component:

Now, let's create the modal component that will showcase the selected image in full size. Within the components directory, create a new file named ModalComponent.tsx and fill it with the following code:

import React from "react";
import Image, { ImageProps } from "next/image";

interface ModalProps {
  images: ImageProps[];
  selectedImage: string | null;
  onClose: () => void;
  onNext: () => void;
  onPrev: () => void;
  selectedIndex: number;
}

export default function ModalComponent({
  images,
  selectedImage,
  onClose,
  onNext,
  onPrev,
  selectedIndex,
}: ModalProps){
  return (
    selectedImage && (
      <div className="fixed inset-0 flex justify-center items-center z-50 bg-black bg-opacity-25">
        <div className="max-w-screen-lg mx-4">
          <div className="bg-white px-4 pb-4">
            <div className="flex flex-row justify-between text-center items-center py-3">
              <span className="text-lg font-semibold">LightBox</span>
              <button
                className=" bg-gray-600 bg-opacity-50 py-1 px-2.5 hover:bg-gray-400
                  hover:bg-opacity-70 transition-all rounded-full text-xl text-white font-bold"
                onClick={onClose}
              >
                &#10005;
              </button>
            </div>
            <div className="relative">
              <button
                className="absolute top-1/2 transform -translate-y-1/2 left-0
               text-white py-6 px-4 md:py-24 md:px-4 text-2xl md:text-5xl"
                onClick={onPrev}
              >
                &lt;
              </button>

              <button
                className="absolute top-1/2 transform -translate-y-1/2 right-0
              text-white py-6 px-4 md:py-24 md:px-4 text-3xl md:text-5xl"
                onClick={onNext}
              >
                &gt;
              </button>

              <div className="absolute bottom-4 left-0 right-0 flex justify-center">
                <span className="text-black text-opacity-80 text-lg font-bold">{`Image ${
                  selectedIndex + 1
                }`}</span>
              </div>

              <Image src={selectedImage} alt="Selected Image" width={660} />
            </div>
          </div>
        </div>
      </div>
    )
  );
};

Conclusion:

Great work!✨ You've built your own dynamic image gallery using Next.js, TypeScript, and Tailwind CSS. Now, let your creativity flow and customize your gallery to make it stand out. Keep exploring, learning, and most importantly, enjoy the coding journey ahead! Happy coding!✨

Building a Responsive Image Gallery with Next.js, TypeScript, and Tailwind CSS

Sanjana Kumari — Mon, 26 Feb 2024 20:15:25 +0000

Introduction:

In this beginner-friendly tutorial, we'll dive into the world of building a responsive image gallery with modal functionality using Next.js, TypeScript, and Tailwind CSS. By the end of this tutorial, you'll have a beautiful and functional image gallery that you can integrate into your Next.js projects.

Setting Up the Project:

To get started, make sure you have Node.js installed on your machine. We'll be using Next.js, a React framework, to build our project. Create a new Next.js project with TypeScript support by running the following command in your terminal:

npx create-next-app@latest my-image-gallery --ts

Creating the Image Gallery:

We'll start by creating our image gallery component. In your pages directory, create a new file named index.tsx and add the following code:

// pages/index.tsx

"use client";

import React, { useState } from "react";
import Image from "next/image";
import ImageViewer from "../components/ImageViewer";
import img1Path from "@/assets/Images/Img-1.jpg";
import img2Path from "@/assets/Images/Img-2.jpg";
import img3Path from "@/assets/Images/Img-3.jpg";
import img4Path from "@/assets/Images/Img-4.jpg";
import img5Path from "@/assets/Images/Img-5.jpg";
import img6Path from "@/assets/Images/Img-6.jpg";


export default function IndexPage(){
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);

const images: ImageProps[] = [
    { src: img1Path, alt: "Image 1" },
    { src: img2Path, alt: "Image 2" },
    { src: img3Path, alt: "Image 3" },
    { src: img4Path, alt: "Image 4" },
    { src: img5Path, alt: "Image 5" },
    { src: img6Path, alt: "Image 6" },
  ];

  const handleOnClicked = (src: string, index: number) => {
    setSelectedImage(src);
    setCurrentImageIndex(index);
  };

  const handleNextImage = () => {
    const nextIndex =
      currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1;
    setSelectedImage(images[nextIndex].src as string);
    setCurrentImageIndex(nextIndex);
  };

  const handlePreviousImage = () => {
    const prevIndex =
      currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1;
    setSelectedImage(images[prevIndex].src as string);
    setCurrentImageIndex(prevIndex);
  };

  return (
    <div className="min-h-screen flex flex-col">
      {selectedImage && (
        <ImageViewer
          selectedImage={selectedImage}
          onNext={handleNextImage}
          onPrev={handlePreviousImage}
        />
      )}
      <div className="flex flex-row flex-wrap gap-3 justify-center px-3 md:px-0">
        {images.map((image, index) => (
          <Image
            key={index}
            {...image}
            className="border-4 border-solid border-blue-900  w-40 cursor-pointer hover:border-blue-500"
            onClick={() => handleOnClicked(image.src as string, index)}
          />
        ))}
      </div>
    </div>
  );
};

Creating the Modal Component:

Next, let's create the modal component that will display the selected image. In your components directory, create a new file named ImageViewer.tsx and add the following code:

// components/ImageViewer.tsx
import React from "react";
import Image from "next/image";

interface ImageViewerProps {
  selectedImage: string;
  onNext: () => void;
  onPrev: () => void;
}

const ImageViewer: React.FC<ImageViewerProps> = ({
  selectedImage,
  onNext,
  onPrev,
}) => {
  return (
    <div className="flex justify-center">
      <div className="relative">
        <Image
          src={selectedImage}
          alt={selectedImage}
          style={{
            width: 1018,
            maxWidth: "100%",
          }}
          className="py-2"
        />

        <button
          className="absolute top-1/2 transform -translate-y-1/2 left-0 text-white py-14 px-4 md:py-28 md:px-5 text-3xl md:text-5xl"
          onClick={onPrev}
        >
          &lt;
        </button>
        <button
          className="absolute top-1/2 transform -translate-y-1/2 right-0 text-white py-14 px-4 md:py-28 md:px-5 text-3xl md:text-5xl"
          onClick={onNext}
        >
          &gt;
        </button>
      </div>
    </div>
  );
};

export default ImageViewer;

Conclusion:

Congratulations! You've successfully built a responsive image gallery with modal functionality using Next.js, TypeScript, and Tailwind CSS. Feel free to customize the design and functionality further to suit your project's needs. Happy coding!✨

(Note: Replace // Define your image data here in the index.tsx file with your actual image data.)

Creating a Simple Modal Component in React with TypeScript for Beginners-

Sanjana Kumari — Mon, 26 Feb 2024 18:30:37 +0000

Introduction:

Modal windows are a common UI element used to display important information or requests for user input without navigating away from the current page. In this beginner-friendly tutorial, we'll explore how to create a simple modal component in React using TypeScript within a Next.js project. TypeScript provides static typing and enhanced tooling, making it easier to catch errors and refactor code as your application grows.

Setting Up the Project:

Before we dive into coding, let's make sure you have everything set up. Ensure you have Node.js installed on your machine. Next.js projects are typically created using npm or yarn. You can generate a new Next.js project with TypeScript support by running one of the following commands:

npx create-next-app@latest my-next-app --ts
# or
yarn create next-app my-next-app --typescript

Replace "my-next-app" with the desired name of your project.

Creating the Modal Component:

Our modal component will consist of two parts: the trigger button that opens the modal and the modal itself. Let's start by creating the modal component:

// components/ModalBox.tsx
import React from "react";

interface ModalProps {
  onClose: () => void;
}

export default function ModalBox({ onClose }: Props) {
  return (
    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-500 bg-opacity-70">
      <div className="bg-white rounded-md overflow-hidden max-w-md w-full mx-4">
        <nav className="bg-black text-white flex justify-between px-4 py-2">
          <span className="text-lg">Modal</span>
          <button
            className="bg-red-300 bg-opacity-50 py-1 px-2 hover:bg-red-500 hover:bg-opacity-70 transition-all rounded-full text-sm"
            onClick={onClose}
          >
            &#10005;
          </button>
        </nav>
        <div className="text-3xl font-bold py-8 pl-4">Hello Modal!</div>
      </div>
    </div>
  );
};

In this TypeScript version, we define an interface ModalProps to specify the type of props that the modal component will receive. This adds type safety and helps in catching errors during development.

Creating the Parent Component:

Now, let's create the parent component that will use our modal:

// pages/index.tsx
import React, { useState } from "react";
import ModalBox from "../components/ModalBox";

export default function Home() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleShowModal = () => {
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
  };

  return (
    <div className="relative">
      <button
        className="bg-green-600 hover:bg-green-500 transition duration-150
      text-white px-5 py-2 rounded-md absolute top-4 left-8 transform"
        onClick={handleShowModal}
      >
        Show Modal
      </button>
      {isModalVisible && <ModalBox onClose={handleCloseModal} />}
    </div>
  );
};

In this TypeScript version of the parent component, we utilize React's useState hook to manage the visibility of the modal. We also define the types of the component to enhance type safety and catch potential errors during development.

Conclusion:

Well done! You've built a basic modal component in React using TypeScript within a Next.js project. TypeScript's static typing and improved tooling offer a more reliable and efficient development process, particularly as project expands. Keep exploring and experimenting with various features to enhance Next.js and React skills further. Happy coding!✨