React Chakra UI Other Portal

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:

• NPM & NodeJS
• React JS
• HTML, CSS and JavaScript
• ReactJS Chakra UI

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: