Have ideas to improve npm?Join in the discussion! »

    use-open-window
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.3 • Public • Published

    use-open-window

    react hook fully typed npm npm Coverage Status Build Status License Netlify Status

    hook icon

    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

    • With URL and options passed to hook
      import React from 'react';
      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 React from 'react';
      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;

    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 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

    Install

    npm i use-open-window

    DownloadsWeekly Downloads

    722

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    35.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar