use-open-window

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

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

Usage

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

const url = 'https://www.google.com/';
const options = {
   centered: true, /* default */
   spec: {
      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;

DEMO

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 |

Dependencies

None. Self source code only. (❤️obvious peer dep on React only)

Reliability

This package is fully tested with total coverage set to . If you found any issue please report it here.

License

Made with :sparkling_heart: by Bartlomiej Zuber ([email protected]) while traveling around the world, and licensed under the MIT License