Stack Overflow
Stack Overflow

Questions tagged [react-portal]

a Portal in React allows for rendering children into a DOM node that exists outside the DOM hierarchy of the parent component. Portals can be created as part of ReactDOM global API.

A Portal in React allows for rendering children into a DOM node that exists outside the DOM hierarchy of the parent component. Portals can be created as part of ReactDOM global API.

98 questions
17
votes
2 answers

Can we have a portal in Next.js

I'm using Next.js with my React app, and I'm having a trouble with creating modal in portal, it throws an error 'Target container is not a DOM element.', here is my code. import React, { useEffect } from 'react'; import ReactDOM from…
Armen Nersisyan
  • 313
  • 2
  • 3
  • 11
10
votes
1 answer

React-testing-library not rendering computed styles from stylesheet

Basic scenario is such: I have a component which has width: 100% as defined in a stylesheet. Therefore it should retain the width of its parent component. I want to calculate the width of my component and apply it to my child component because I am…
graffic
  • 111
  • 1
  • 5
6
votes
1 answer

How do React Portals preserve Context from Providers in a different subtree?

So an interesting and amazing property that Portals solve is preserving Context from a Provider even if your component needs to be rendered somewhere else. If you wrap a component subtree with a ContextProvider, any component rendered in that…
aug
  • 11,138
  • 9
  • 72
  • 93
5
votes
4 answers

How to preview component with react portal using storybook.js

I implemented a Popper component using popper.js, and I used React's Portal to render popper element. And now I want to preview my popper component, but It fails to create portal on storybook.js Here's my approach. .storybook/preview.js import {…
ANTARES_SEO
  • 317
  • 4
  • 9
5
votes
2 answers

Getting "Target container is not a DOM element" error when using createPortal in Next.js

I am trying to make an editor using slate-react. I have made a hover menu but there is a styling issue with Next.js rendering. So I am trying to createPortal using React under Next.js' default id __next. But I'm getting Error: Target container is…
Md Rezaul Karim
  • 508
  • 7
  • 17
5
votes
1 answer

Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?

I want to make it centered like the 1st modal on https://tailwindui.com/components/application-ui/overlays/modals I copied the same classes on the Modal below but I am unable to center it vertically. The classes are the exact same. Is it a React…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
5
votes
0 answers

React-portal re-render issues

I'm using react-portal in my reactjs app. I've created two root elements, one to render the react app into and one for the react-portal:
MrToast
  • 1,159
  • 13
  • 41
4
votes
3 answers

How to create a portal/modal in Next 13.4

I wanted to create a Modal in NextJS 13.4 (with the new layout.tsx file system), But I couldn't. since this is a new thing I couldn't find a solution on the web either. Here are the things that I've tried: Edit: In the solutions: import React from…
Re9iNee
  • 412
  • 5
  • 15
4
votes
0 answers

react / react-cytoscape / cytoscapejs popout window functionality

I am seeking some troubleshooting advice on the following setup: I'm working on a pop-out / new window functionality for the callback graph debugger in OSS Dash. Goal: Be able to use the callback graph debugger / cytoscapejs in an standalone window,…
jcuypers
  • 1,774
  • 2
  • 14
  • 23
4
votes
1 answer

Rendering an iFrame within a React Portal

I was creating a Logger service which would track events within my application. To make the Logger service generic, I used React's Portal to capture the events fired in my application. The basic idea of my application is: …
Ali Bhagat
  • 475
  • 1
  • 6
  • 15
4
votes
1 answer

Pass unknown context to children component

I have an external component (Leaflet Map). This component has a lot of children. The application draws different things on the map depending on the state, routes, etc. Using Leaflet (or just Map) components like Paths, Markers, etc requires me to…
Łukasz Ostrowski
  • 960
  • 4
  • 12
  • 25
3
votes
1 answer

Can I port an element to any DOM node using react portals?

I want to loop over a bunch of custom elements and give them parent to child relationship. So arr[0] will be child of arr[1], which will be the child of arr[2] ... The following method adds elements to the boxes…
Shubham Kumar
  • 69
  • 6
2
votes
1 answer

React Portal does not create element at given position

I have a component that blurs everything that is on the screen. const SVGBlur = () => (
four-eyes
  • 10,740
  • 29
  • 111
  • 220
2
votes
2 answers

How to preview a React Portal component using storybook

I have this code: index.html ...
... Component.tsx ... const exampleRoot = document.getElementById("example-root") function Component() { return ReactDOM.createPortal(
...
,…
Luiz Meraki
  • 31
  • 5
2
votes
1 answer

How do I render a react portal modal with different children?

Right now, I have a react portal rendering a 'pinnable' side drawer modal that will display based on a redux state. The contents of the modal will have information based on where that modal was pinned from, in this case my notifications. The problem…
z0mby
  • 95
  • 1
  • 11
1
2 3 4 5 6 7