React Chakra UI Other Portal
Last Updated :
24 Apr, 2025
Chakra UI Other Portal component by Chakra UI allows and enables users to render the components outside their parent hierarchy, this is useful for rendering efficiently React Applications. We can use this component where we need to be visually positioned in the DOM outside its parent. In this article, we will explore all the types of Chakra UI Other Portal components with their practical implementation in terms of examples.
Prerequisites:
Approach:
We have created the Chakra UI for Other Portal types like Custom Container, Nesting Porta, and Opting out of Portal Nesting. Each type is demonstrated in terms of proper visual examples. We can use this component to render modals or popovers outside the main content. We can also use it in Tooltips, Dropdown Menus, Postoning Elements, etc.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app chakra
Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:
cd chakra
Step 3: After creating the React application, Install the required package using the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies are in the package.json file.
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Example: Below is the practical implementation of the Chakra UI Other Portal.
JavaScript
import React, { useRef } from 'react';
import {
ChakraProvider,
Box,
Portal,
extendTheme,
useDisclosure,
Heading,
Button,
Text,
VStack,
HStack,
} from '@chakra-ui/react';
const theme = extendTheme({
styles: {
global: {
body: {
fontFamily: 'Roboto, sans-serif',
bg: 'gray.100',
},
},
},
});
const geeksData = {
customContainer: `Explore Python,
JavaScript, React, and more!`,
nestedPortals: `Learn about Python,
JavaScript, and React.`,
optOutNesting: 'Join our MERN Stack Course!',
};
function App() {
const { isOpen: customContainerOpen,
onToggle: customContainerToggle } = useDisclosure();
const { isOpen: nestedPortalsOpen,
onToggle: nestedPortalsToggle } = useDisclosure();
const { isOpen: optOutNestingOpen,
onToggle: optOutNestingToggle } = useDisclosure();
const containerRef = useRef();
return (
<ChakraProvider theme={theme}>
<Box maxW="800px" mx="auto"
mt="8" textAlign="center">
<Heading as="h1"
color="green.500" mb="4">
GeeksforGeeks
</Heading>
<Heading as="h1"
color="black.500" mb="4">
Chakra UI Other Portal
</Heading>
<Box bg='red.400' color='white'
p="4" mb="4" borderRadius="md">
<Text fontSize="lg">
Unlock the World of Coding
using GeeksforGeeks,
</Text>
<Portal containerRef={containerRef}>
<Text fontSize="lg">
{geeksData.customContainer}
</Text>
</Portal>
<Box ref={containerRef}
bg='yellow.500' p="4">
<Text fontSize="lg">
Container: Hey Geek !
Dive In React World,
</Text>
<Button onClick={customContainerToggle}
mt="2" colorScheme="teal" size="sm">
Explore Content
</Button>
</Box>
</Box>
<Box bg='teal.500'
color='white' p="4" mb="4" borderRadius="md">
<Text fontSize="lg">
Welcome to the GeeksforGeeks Portal,
</Text>
<Portal>
<Text fontSize="lg">
{geeksData.nestedPortals}
</Text>
</Portal>
</Box>
<Box bg='red.400'
color='white' ref={containerRef}
p="4" mb="4" borderRadius="md">
<Button onClick={nestedPortalsToggle}
colorScheme="teal" size="sm">
Learn More
</Button>
</Box>
<Box bg='teal.500'
color='white' p="4"
mb="4" borderRadius="md">
<Text fontSize="lg">
Embark on a Learning Journey with GFG,
</Text>
<Portal appendToParentPortal={false}>
<Text fontSize="lg">
{geeksData.optOutNesting}
</Text>
</Portal>
</Box>
<Box style={{ background: 'red' }}
ref={containerRef} p="4"
mb="4" borderRadius="md">
<Button onClick={optOutNestingToggle}
colorScheme="teal" size="sm">
Join Course
</Button>
</Box>
<VStack spacing="4">
<Text fontSize="sm" color="gray.500">
Explore more GeeksforGeeks
content with interactive portals!
</Text>
<Text fontSize="sm" color="gray.500">
Powered by GFG
</Text>
</VStack>
</Box>
</ChakraProvider>
);
}
export default App;
Start your application using the following command:
npm start
Output: Now go to http://localhost:3000 in your browser:
Similar Reads
React Chakra UI Other
Chakra UI is a useful tool that allows users to design appealing and practical websites and applications in a quick and easy way. It provides a variety of ready-to-use components that can be personalized and adjusted to meet different project needs, thus streamlining web development and making it mo
6 min read
React Chakra UI Overlay
Chakra UI, a comprehensive React component library, introduces the concept of Overlays serving as dynamic visual elements that are superimposed on the main content, providing additional context, functionality, or notifications. Although Chakra UI doesn't have a standalone "Overlay" component, it off
4 min read
React Chakra UI Overlay Drawer
React Chakra UI Overlay Drawer enhances web app navigation, integrating smoothly with Chakra UI. It offers intuitive access to extra content, without disrupting the main interface. Simple and customizable, it elevates user engagement and satisfaction. Prerequisites:NPM and NodeReactHTML, CSS, and Ja
2 min read
React Chakra UI Filter
React Chakra UI Filter is the component that is used to apply filter and backdrop filters to the various elements. Using this component, we can adjust the grayscale, blur, brightness, contrast, and more properties of the elements. The simple Image can be adjusted in various appearances by controllin
3 min read
React Chakra UI Grid Layout
React Chakra UI Grid Layout is an incredibly powerful and flexible component designed to streamline the creation of responsive and aesthetically pleasing grid-based designs within web applications. As an integral part of the Chakra UI library, this grid layout system offers developers a seamless int
2 min read
React Chakra UI Other Transitions
React Chakra UI has a Transition component which has types like Fade, ScaleFade, SlideFade, and Collapse. All these types provide animation effects and smooth transitions in the application. By using the transition types in the application, the appearance of the elements is enhanced and the applicat
3 min read
React Chakra UI Other Show/Hide
React Chakra UI Show and Hide components are used to show or hide children elements when a specific media query matches. We can provide custom media query to the Show and Hide components or use the predefined responsive size defined by Chakra UI. Prerequisites:NPM & NodeReact JSHTML, CSS and Jav
2 min read
React Chakra UI Data Display
React Chakra UIÂ Data Display is the component that can be embedded in the React application to display various data components. All these components are for data visualization purposes for an interactive and user-friendly interface. The various data components include Card, Badges, List, Table, Tag,
3 min read
React Chakra UI Gradient
React Chakra UI Gradients allow you to add stylish and visually appealing backgrounds. Gradients are a blend of two or more colors that transition smoothly from one to another. In this article, we will learn about the implementation of the Gradients in Chakra UI. Prerequisites:NPM & NodeReactRea
2 min read
React Chakra UI Form Number Input
React Chakra UI Form Number Input is a powerful and user-friendly component tailored for efficient numeric data entry in web applications. Built on the Chakra UI foundation, this component seamlessly integrates into React applications, providing developers with a simple yet customizable solution for
2 min read