Need private packages and team management tools?Check out npm Teams »

use-open-window

1.2.3 • Public • Published

use-open-window

npm npm Coverage Status Build Status License Netlify Status

hook icon

Useful & super tiny (❤️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);
  
  return (
    <div className="App">
      <div onClick={handleWindowOpen}>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

Reliability

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

License

Made with 💖 by Bartlomiej Zuber (bartlomiej.zuber@outlook.com) while traveling around the world, and licensed under the MIT License

Install

npm i use-open-window

DownloadsWeekly Downloads

305

Version

1.2.3

License

MIT

Unpacked Size

29.9 kB

Total Files

18

Last publish

Collaborators

  • avatar