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.

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

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

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

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

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