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

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

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