React Close Window : Close Current Tab | Open Window Javascript Example

React is used to open and close browser tabs or windows. In React, a popular JavaScript library for building user interfaces, there are various methods to achieve this functionality. One approach involves utilizing the native JavaScript methods window.open and window.close, which can open a new tab or window and close the current tab or window, respectively. However, it's important to note that these methods have some limitations and security restrictions, such as only being able to close tabs that were opened by the same script.

written

reviewed

updated

What is the limitation of using the window.close() method in React to close windows?

You can use window.close(). The window.close() method is used to close the current browser window or tab. This method has no parameters and can only be called on the window that invoked it. When called, the window will close immediately without any further confirmation prompts

React Js Close Current Window Example

 <div id="app"></div>
<script type="text/babel">
        const { useState } = React;
        const { render } = ReactDOM;

        function App() {
            const [result, setResult] = useState("");

            const openWindow = () => {
                const url = "https://fontawesomeicons.com";
                const windowName = "myWindow";
                const windowSize = "width=500,height=300";
                setResult(window.open(url, windowName, windowSize));
            };

            const closeWindow = () => {
                result.close();
                setResult(null);
            };

            return (
                <div >
                    <button onClick={openWindow}>Open window</button>
                    <button onClick={closeWindow} disabled={!result}>Close window</button>
                </div >
            );
        }

        render(<App />, document.getElementById('app'));
</script>

Run

Output of React Js Close Current Window

How to React Open New Window on Button Click?

In ReactJS, you can use window.open(). You can create a function that calls window.open() with the URL of the page you want to open and an optional name for the new window. Then, use this function as an event handler for a button or link in your React component

React Js Open link/url popup window | Open Window Example

<div id="app"></div>
<script type="text/babel">
        const { useState } = React;
        const { render } = ReactDOM;

        function App() {
            const [result, setResult] = useState("");

            const openWindow = () => {
                const url = "https://fontawesomeicons.com";
                const windowName = "myWindow";
                const windowSize = "width=500,height=300";
                setResult(window.open(url, windowName, windowSize));
            };

            return (
                <div>
                    <button onClick={openWindow}>Open Window</button>
                </div>
            );
        }

        render(<App />, document.getElementById('app'));
 </script>

Run

Output of Check if Input Value is Empty Javascript

Pasted Image

Javscript Close Current Window | Tab

<body>

    <button onclick="closeWindow()">Close Window</button>

    <script>
        function closeWindow() {
            window.close();
        }
    </script>

</body>

👉 Vue Js Check Input Field is Empty or Not

React JS Tutorial