Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

How to use Pagination Component in ReactJS ?

How to use Portal Component in ReactJS ?

Last Updated : 23 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach.

Prerequisites:

NodeJS or NPM
React JS
Material UI

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

JavaScript

import React from 'react'; import Portal from '@material-ui/core/Portal';  export default function App() {      const [isVisible, setVisibility] = React.useState(false);     const box = React.useRef(null);      return (         <div style={{ display: 'block', padding: 30, width: 500 }}>             <h4>How to use Portal Component in ReactJS?</h4>             <button type="button" onClick={() => {                 setVisibility(!isVisible)             }}>                 {!isVisible ?                     'Mount the Children' :                     'Unmount the Children'}             </button>             <div style={{                 padding: 12,                 margin: 2,                 border: '2px solid',             }}>                 Greetings from GeeksforGeeks                 {isVisible ? (                     <Portal container={box.current}>                         <span>Your Mounted Data is Here!!</span>                     </Portal>                 ) : null}             </div>             <div style={{                 padding: 12,                 margin: 2,                 border: '2px solid',             }} ref={box} />         </div>     ); }

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000

How to use Pagination Component in ReactJS ?

gouravhammad

Improve

Article Tags :

JavaScript
ReactJS
Web Technologies
React-Questions

Similar Reads

How To Use Modal Component In ReactJS?

Modals are a popular UI component used to display content in a pop-up window like alerts, forms, or additional information. In ReactJS, there are multiple ways to implement a modal. In this article, we will discuss two common approaches: using reusable functional components and using the Material-UI

How to use Pagination Component in ReactJS ?

Pagination is a feature through which users can easily switch between pages across a website or app. With the help of this component, a user can select a specific page from a range of pages. Material UI for React has this component available for us, and it is very easy to integrate. We can use the f

How to use Link Component in React JS?

Material-UI provides a set of components that can be seamlessly integrated with React to create visually appealing and functional navigation elements. The Link component allows you to easily customize anchor elements with our own theme colors and typography styles. Material UI for React has this com

How to use XGrid Component in ReactJS ?

An XGrid Component is a Commercial version of the MaterialUI Component. It provided more enhanced features over the community DataGrid Component like column resizing, column reordering, pagination over 100 rows, etc. A DataGrid Component helps in displaying the information in a grid-like format of r

How to use Badge Component in ReactJS?

Badge generates a small badge to the top-right of its children component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Badge Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to Create

How to use Avatar Component in ReactJS?

Avatars are found throughout material design with uses in everything from tables to dialog menus. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Avatar Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSt

How to use DataGrid Component in ReactJS ?

A DataGrid Component helps in displaying the information in a grid-like format of rows and columns. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use DataGrid Component. Creating React Application And Inst

React Suite Portal Component

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Portal component renders its children into a new subtree outside the current DOM hierarchy. We can use the following approach in ReactJS to use the React Suite P

How to publish a ReactJS component to NPM ?

Follow these simple steps in order to publish your own ReactJS component to NPM. Step 1: Initial Setup In order to publish any ReactJS Component to npm (node package manager), first we have to create a React component in the React app. Following are the instructions for creating any react app. Creat

How to use events in ReactJS ?

Modern webpages rely on user interactions, triggering events like clicks or keypresses. React facilitates event handling with built-in methods, allowing developers to create listeners for dynamic interfaces and responses. JavaScript events, inherent to the DOM, use bubbling propagation by default, m

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences