Draggble
In Below code snippet we discuss about how to create a Draggable component in React using React Portals. This component allows its children to be dragged around the screen.
When you use the Draggable component in your application, you wrap the element or component that you want to make draggable with the Draggable component. The Draggable component then uses the Portal component to render its content into a DOM node that exists outside the React tree hierarchy, allowing the draggable element to overlay other content. The handleDragStart function ensures that the drag operation is properly initiated, and the draggable=”true” attribute enables the native drag-and-drop functionality of the browser.
Let’s break down the code to understand its functionality:
import React, { useRef } from 'react';
import Portal from './Portal';
const Draggable = ({ children }) => {
const ref = useRef(null);
const handleDragStart = (e) => {
e.dataTransfer.setData('text/plain', ref.current.id);
};
return (
<Portal>
<div ref={ref} draggable="true"
onDragStart={handleDragStart}>
{children}
</div>
</Portal>
);
};
export default Draggable;
import React, { useState } from 'react';
import Modal from './Modal';
import Tooltip from './Tooltip';
import Draggable from './Draggable';
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div className="App">
<button onClick={() =>
setIsModalOpen(true)}>Open Modal</button>
<Tooltip text="Drag me!">
<Draggable>
<div>Draggable Item</div>
</Draggable>
</Tooltip>
{isModalOpen && (
<Modal isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}>
<h2>Modal Title</h2>
<p>Modal content...</p>
</Modal>
)}
</div>
);
}
export default App;
Output:
Draggable Portal
Explain the importance of React Portals ?
React Portals are a feature that allows developers to render components outside the current React tree hierarchy. This capability is particularly useful for creating components that need to break out of their container, such as modals, tooltips, or any other UI element that requires a different positioning or layering than its parent component. This article will demonstrate how React Portals can be utilized in three different scenarios i.e. creating modals, implementing tooltips, and enabling drag-and-drop functionality.
We will discuss the approach of creating React Portals:
Table of Content
- How It Works
- Modal
- ToolTip
- Draggble
Steps to Create React App and Installing Module
Step 1: Create a new React.js project and install the required dependencies:
npx create-react-app react-portals-example.
Step 2: Navigate to the root directory of your project using the following command.
cd react-portals-example
Exaplanation:
- Create Portal Container: Create a new file named Portal.js in the src directory. This file will contain the logic for rendering components using a portal.
- Create the Modal, Tooltip, and Draggable Components: Inside src, create separate files for each component (Modal.js, Tooltip.js, Draggable.js). These files will define the functional components that use the Portal component to render their children into a DOM node that exists outside the React tree hierarchy.
- Edit the App Component: Modify App.js to include buttons that toggle the visibility of the modal and tooltips, and use the Draggable component to render draggable items.
Project Structure:
Project Structure