Create Draggable Modal in React JS

Introduction

Creating a modal in ReactJS is a common task, but adding draggable features can make it more interactive and user-friendly. This guide will walk you through the steps to create a modal in ReactJS with draggable features. Whether you're a beginner or looking to enhance your React skills, this tutorial is simple to follow.

Step-by-Step Guide to Creating a Draggable Modal in ReactJS

Step 1: Set Up the Environment

Before starting, make sure you have Node.js and npm (Node Package Manager) installed on your computer. If not, download them from the official Node.js website. Once installed, follow these steps:

1. Create a New React App:
   Open your terminal and run the following command to create a new React app:

   npx create-react-app modal-component

2. Navigate to the Project Directory:
   Move into your project directory with:

   cd modal-component

3. Start the Development Server:
   Start your React development server to make sure everything is set up correctly:

   npm start

   Your browser should open and display the default React app. If it does, you're ready to start coding.

Step 2: Install Required Packages

To create a draggable modal, we'll need the react-draggable package. Install it using npm:

npm install react-draggable

Step 3: Create the Modal Component

Next, create a new component for your modal. Inside the src folder, create a new file called Modal.js. Add the following code:

import React, { useState } from 'react';
import './Modal.css'; 
import Draggable from 'react-draggable';

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button id="openModalBtn" onClick={openModal}>Open Modal</button>

      {isOpen && (
        <div id="myModal" className="modal">
          <Draggable>
          <div className="modal-content">
            <header className="modal-header">
              <div>
                <h2>Modal Title</h2>
                <h3 className="modal-subtitle">Subtitle Here</h3>
              </div>
              <span className="close" onClick={closeModal}>×</span>
            </header>
            <div className="modal-body">
              <img src="https://via.placeholder.com/400x200" alt="Placeholder" className="modal-image" />
              <p>This is a minimalistic modal with a black and white theme, featuring enhanced content and interactive elements. Below is an image with some descriptive text to illustrate the content layout.</p>
              <p>Additional text can be included here to provide more information or context as needed.</p>
            </div>
            <footer className="modal-footer">
              <div className="footer-text">
                <p>For more information, please contact us at <a href="mailto:[email protected]">[email protected]</a>.</p>
              </div>
              <div className="footer-icons">
                <i className="fas fa-phone-alt"></i>
                <i className="fas fa-envelope"></i>
                <i className="fas fa-info-circle"></i>
              </div>
            </footer>
          </div>
          </Draggable>
        </div>
      )}
    </div>
  );
};

export default Modal;

Step 4: Custom CSS for the Modal

To style your modal, create a Modal.css file in the src folder with the following CSS:

body {
    font-family: 'Poppins',Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  #openModalBtn {
    font-family: 'Poppins',Arial, sans-serif;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, color 0.3s;
  }
  
  #openModalBtn:hover {
    color: #fff;
    background-color: #000;
  }
  
  .modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.5s;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 3px solid #000;
    width: 50%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    cursor: move;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }
  
  .modal-header h2 {
    margin: 0;
    font-size: 24px;
  }
  
  .modal-subtitle {
    font-size: 16px;
    color: #555;
  }
  
  .close {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close:hover,
  .close:focus {
    color: #555;
    text-decoration: none;
  }
  
  .modal-body {
    margin: 20px 0;
  }
  
  .modal-body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }
  
  .modal-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  .modal-footer {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #000;
    padding-top: 10px;
    margin-top: 20px;
  }
  
  .footer-text {
    margin-bottom: 10px;
  }
  
  .footer-text p {
    margin: 0;
    font-size: 14px;
    color: #555;
  }
  
  .footer-text a {
    color: #000;
    text-decoration: none;
  }
  
  .footer-text a:hover {
    text-decoration: underline;
  }
  
  .footer-icons {
    display: flex;
    gap: 15px;
  }
  
  .footer-icons i {
    font-size: 20px;
    color: #000;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  .footer-icons i:hover {
    color: #555;
  }

Step 5: Implement Font Awesome Icons and Poppins Font in Your App

Open public/index.html and include the following lines in the <head> section:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

Step 6: Implement the Modal in Your App

Now, integrate this modal into your main App.js file. Here's how you can do it:

import Modal from './Modal';
import './App.css';

function App() {
  return (
    <div className="App">
      <Modal />
    </div>
  );
}

export default App;

Step 7: Test Your Draggable Modal

Run your app with npm start and open the modal by clicking the "Open Modal" button. You should now see a draggable modal that you can move around the screen.

Conclusion

Adding a draggable modal to your ReactJS project is a great way to enhance user experience. With the help of the react-draggable package, you can easily make any modal draggable with minimal code. Follow the steps outlined in this guide to create your own draggable modal and customize it to fit your project’s needs.

This simple tutorial helps you integrate an interactive feature that can make your web application more engaging.

Modal Live Demo ⟶

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊