How to Display a PDF Using an Iframe in Any Web Development Project

Mir Fayek Hossain — Thu, 15 Jun 2023 05:15:55 +0000

Introduction:
When building a portfolio, one essential element is showcasing your resume in a professional and accessible manner. As a Next.js developer, I embarked on a search for the ideal npm package to seamlessly display my CV PDF within my portfolio. After an extensive exploration and countless hours of research, I discovered a reliable solution that leverages the power of the iframe element. In this article, I will guide you through the process of effectively utilizing an iframe to exhibit a PDF document with various options, including downloading. Whether you are working on a Next.js project or any other web development endeavor, this technique will empower you to enhance your portfolio presentation.

Prerequisites:
Before proceeding, it is recommended to have a basic understanding of HTML, CSS, JavaScript, and familiarity with a CSS framework such as Tailwind CSS. Additionally, ensure that you have a PDF file ready to be displayed within your portfolio.

Step 1: Project Setup
To begin, create a new Next.js project or open your existing one. Ensure that you have all the necessary files and dependencies in place to facilitate a seamless integration. For the sake of simplicity, we will assume you have a basic HTML file, a CSS file utilizing Tailwind CSS, and a JavaScript file.

Step 2: Including the PDF File
Next, copy the PDF file, such as your resume, into a designated folder within your project directory. Organizing PDF files within a specific folder will aid in maintaining a structured project environment. In this example, let's assume the PDF file is named "resume.pdf" and resides in the "pdfs" folder.

Step 3: HTML Markup
Within your HTML file, incorporate an iframe element at the desired location where you want the PDF to be displayed. Assign the src attribute of the iframe to the URL of the PDF file using the relative path. Consider the following code snippet:

<div class="pdf-container"> <iframe src="pdfs/resume.pdf" frameborder="0" width="100%" height="100%"></iframe> </div>
Step 4: Styling with Tailwind CSS
To ensure an aesthetically pleasing PDF display, apply CSS styles using Tailwind CSS. In this example, we will center the PDF container and assign it a fixed height. Add the following classes to your CSS file:
.pdf-container { display: flex; justify-content: center; align-items: center; height: 600px; /* Adjust the height as per your requirements */ }
Step 5: Testing and Customization
Save your changes and open the HTML file in a web browser. You should now witness the PDF being displayed within the iframe, elegantly centered on the page. Feel free to fine-tune the iframe's dimensions and customize the container's styling to align harmoniously with your project's overall aesthetics.

Conclusion:
In this article, we explored a professional and effective approach to integrating PDFs within a portfolio using an iframe element. By following the steps outlined here, you can seamlessly incorporate your CV or any PDF document into your Next.js project or any other web development endeavor. This technique not only ensures the accessibility and usability of your portfolio but also provides you with the flexibility to enhance the overall user experience.

While utilizing iframes to display PDFs is just one of many available solutions, it is crucial to choose an approach that best aligns with your project's specific requirements. Remember to maintain a balance between functionality, performance, and user-friendliness when implementing PDF display techniques. Elevate your portfolio presentation and captivate potential employers or clients with an impeccably showcased resume or any PDF document.

How to Detect Clicks Outside of an Element in NextJS or React

Mir Fayek Hossain — Fri, 14 Apr 2023 09:02:23 +0000

As a developer, you might have come across situations where you need to detect when a user clicks outside of a particular element in your NextJs or React app. For example, you might have a dropdown menu that you want to close when a user clicks outside of it or a modal. In this post, we'll explore how to detect clicks outside of an element in NextJS or React using the useRef and useEffect hooks.

To get started, let's take a look at the following code snippet:

import { useEffect, useRef } from "react";

const Component = () => {
  const ref = useRef(null);

  useEffect(() => {
    const handleOutSideClick = (event) => {
      if (!ref.current?.contains(event.target)) {
        alert("Outside Clicked.");
        console.log("Outside Clicked. ");
      }
    };

    window.addEventListener("mousedown", handleOutSideClick);

    return () => {
      window.removeEventListener("mousedown", handleOutSideClick);
    };
  }, [ref]);

  return (
    <div className="w-screen h-screen bg-yellow-200 flex justify-center items-center">
      <div className="w-96 h-96 bg-orange-500" ref={ref}>
        Click outside of me.
      </div>
    </div>
  );
};

export default Component;

In this code snippet, we have a functional component called Component. The component renders a div element that has a child div element with the text "Click outside of me". We use the useRef hook to create a ref that we can use to reference the child div element.

The useEffect hook is used to add an event listener to the window object for the "mousedown" event. When the event is triggered, the handleOutSideClick function is called. This function checks if the event.target (i.e., the element that was clicked) is inside the child div element. If the clicked element is not inside the child div element, it means that the user clicked outside of the child div element. In this case, we alert the user that the outside was clicked and log the message "Outside Clicked" to the console.

We also return a function from the useEffect hook that removes the event listener when the component is unmounted. This is to avoid memory leaks.

To test this code, you can run the NextJS or React app and click anywhere on the screen outside of the child div element. You should see an alert with the message "Outside Clicked" and the message should be logged to the console.

In conclusion, detecting clicks outside of an element in NextJS or React can be achieved using the useRef and useEffect hooks. By creating a ref to reference the child element and adding an event listener to the window object, we can detect clicks outside of the element and perform the desired action.

DEV Community: Mir Fayek Hossain

How to Display a PDF Using an Iframe in Any Web Development Project

How to Detect Clicks Outside of an Element in NextJS or React