Use-open-window NPM

use-open-window

Useful & super tiny (less than 1KB ✔️) (❤️obvious dep on React only) hook to open links in new window.

Note: Version ^1.4.0 of this hook has dependency on React 18, if you wish to use it with React 17 then please use version ^1.3.0.

Installation

npm i use-open-window --save

Alternatively you may use yarn:

yarn add use-open-window

Link to npm: https://www.npmjs.com/package/use-open-window

Click here to see DEMO

Demo

Demo GIF

Usage

With URL and options passed to hook

import { useOpenInWindow }  from 'use-open-window';

const url = 'https://www.google.com/';
const options = {
  centered: true, /* default */
  specs: {
      width: 800, /* window width */
      height: 600, /* window height */
  }
};
const App = () => {
  const [handleWindowOpen, newWindowHandle] = useOpenInWindow(url, options);
  
  return (
    <div className="App">
      <div onClick={handleWindowOpen}>Click me</div>
    </div>
  );
}

export default App;

With URL and options passed inside callback

import { useOpenInWindow }  from 'use-open-window';

const options = {
  url: 'https://www.google.com/' /* url to page to open */
  centered: true, /* default */
  specs: {
      width: 800, /* window width */
      height: 600, /* window height */
  }
};
const App = () => {
  const [handleWindowOpen, newWindowHandle] = useOpenInWindow();
  
  return (
    <div className="App">
      <div onClick={(ev) => handleWindowOpen(ev, options)}>Click me</div>
    </div>
  );
}

export default App;

Hook params

Parameter	Type	Description	Required
url	string	Url to load inside new window	Y
options	UseOpenInWindowOptions	Set of hook options (centered, focus, window size etc.)	N

Options

Option	Description	Default
name	Specifies the target attribute or the name of the window. The following values are supported: _blank - URL is loaded into a new window, or tab. _parent - URL is loaded into the parent frame _self - URL replaces the current page _top - URL replaces any framesets that may be loaded name - The name of the window (Note: the name does not specify the title of the new window)	_blank
centered	Specifies if window should be centered	true
focus	Puts new window in focus	true
specs.width	The height of the window. Min. value is 100 (browser restriction).	800
specs.height	The width of the window. Min. value is 100 (browser restriction).	800
left	The left position of the window. Negative values not allowed.	undefined
top	The top position of the window. Negative values not allowed.	undefined
channelmode	Whether or not to display the window in theater mode. IE only	'no'
fullscreen	Whether or not to display the browser in full-screen mode. A window in full-screen mode must also be in theater mode. IE only.	'no'
location	Whether or not to display the address field. Opera only.	null
menubar	Whether or not to display the menu bar.	null
resizable	Whether or not the window is resizable. IE only.	null
scrollbars	Whether or not to display scroll bars. IE, Firefox & Opera only.	null
status	Whether or not to add a status bar	null
titlebar	Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box.	null
toolbar	Whether or not to display the browser toolbar. IE and Firefox only.	null