Skip to content

bartlomiejzuber/use-open-window

Repository files navigation

use-open-window

react hook fully typed npm npm Coverage Status License Netlify Status

hook icon

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

Dependencies Deps

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

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