Categories
React Answers

How to Open a Component in New Window on a Click in React?

Spread the love

Sometimes, we want to open a component in new window on a click in React.

In this article, we’ll look at how to open a component in new window on a click in React.

Open a Component in New Window on a Click in React

To open a component in new window on a click in React, we can call window.open with the element we created.

For instance, we write:

import React, { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

const RenderInWindow = (props) => {
  const [container, setContainer] = useState(null);
  const newWindow = useRef(window);

  useEffect(() => {
    const div = document.createElement("div");
    setContainer(div);
  }, []);

  useEffect(() => {
    if (container) {
      newWindow.current = window.open(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      newWindow.current.document.body.appendChild(container);
      const curWindow = newWindow.current;
      return () => curWindow.close();
    }
  }, [container]);

  return container && createPortal(props.children, container);
};

export default function App() {
  const [open, setOpen] = useState();
  return (
    <>
      <button onClick={() => setOpen(true)}>open</button>
      {open && <RenderInWindow>hello world</RenderInWindow>}
    </>
  );
}

to create the RenderInWindow component that opens a new window when it mounts.

To do this, we create the container state with useState.

And we create a ref to store the window object.

In the first useEffect callback, we create a div that we use as the content of the element when RenderInWindow mounts and call setContainer to set the div as the value of `container.

In the 2nd useEffect callback, we check if container is set.

If it is, then we call window.open and set the returned window object as the value of newWindow.current.

And we set the content of the window with:

newWindow.current.document.body.appendChild(container);

And then we get newWindow.current and set it to curWindow.

Finally we return a function that calls curWindow.close to close the window when the component unmounts.

Then we return a portal with the window.

We get the content of the window from the children prop.

In App, we render the RenderInWindow component with the content of the popup window when open is true.

And we make open true when we click on open.

Therefore, we should see ‘hello world’ displayed in a popup window when we click on open.

Conclusion

To open a component in new window on a click in React, we can call window.open with the element we created.

7 replies on “How to Open a Component in New Window on a Click in React?”

Tying to use your code with typescript. but I get error on the line:
newWindow.current = window.open(
Error:
[{
“resource”: “/C:/Users/ogal/source/repos/SPFx/SPFx14/Ace2InboxStatus/src/webparts/ace2InboxStatus/components/Child/OneJobWindow.tsx”,
“owner”: “typescript”,
“code”: “2322”,
“severity”: 8,
“message”: “Type ‘Window’ is not assignable to type ‘Window & typeof globalThis’.\n Type ‘Window’ is missing the following properties from type ‘typeof globalThis’: globalThis, eval, parseInt, parseFloat, and 611 more.”,
“source”: “ts”,
“startLineNumber”: 18,
“startColumn”: 13,
“endLineNumber”: 18,
“endColumn”: 30
}]
do you have a typing for it?

Hi I am using the above code to open a component in new window , for the first time the window is opening. For the second time window is not opening and I didn’t see any errors in my code. May I know why its happening.

The problem is that he never set the open state in false. It is necessary to set the open state false to be able to open the window again. I am still trying to achieve this

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.