Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bartlomiejzuber/use-open-window
React hook for open links in separate windows ✔️
https://github.com/bartlomiejzuber/use-open-window
Last synced: 2 days ago
JSON representation
React hook for open links in separate windows ✔️
- Host: GitHub
- URL: https://github.com/bartlomiejzuber/use-open-window
- Owner: bartlomiejzuber
- License: mit
- Created: 2019-12-13T23:24:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-25T07:00:55.000Z (8 months ago)
- Last Synced: 2024-05-06T04:42:22.210Z (7 months ago)
- Language: HTML
- Homepage:
- Size: 2.35 MB
- Stars: 13
- Watchers: 4
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - bartlomiejzuber/use-open-window - React hook to open links in separate windows ✔️ (HTML)
README
## use-open-window
[](https://www.npmjs.com/package/use-open-window)
[](https://www.npmjs.com/package/use-open-window)
[](https://coveralls.io/github/bartlomiejzuber/use-open-window)
[](https://github.com/bartlomiejzuber/use-open-window/blob/master/LICENSE)
[](https://app.netlify.com/sites/use-open-window-demo/deploys)
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
```sh
npm i use-open-window --save
```
Alternatively you may use `yarn`:
```sh
yarn add use-open-window
```
Link to npm:
[https://www.npmjs.com/package/use-open-window](https://www.npmjs.com/package/use-open-window)
### Click here to see [DEMO](https://use-open-window-demo.netlify.app/)
### Demo
## Usage
- With URL and options passed to hook
```javascript
import { useOpenInWindow } from 'use-open-window';
const url = 'https://www.google.com/';
const options = {
centered: true, /* default */
security: {
noopener: true, /* default */
noreferrer: true, /* default */
nofollow: false /* default */
},
specs: {
width: 800, /* window width */
height: 600, /* window height */
}
};
const App = () => {
const [handleWindowOpen, newWindowHandle] = useOpenInWindow(url, options);
return (
Click me
);
}
export default App;
```
- With URL and options passed inside callback
```javascript
import { useOpenInWindow } from 'use-open-window';
const options = {
url: 'https://www.google.com/' /* url to page to open */
centered: true, /* default */
security: {
noopener: true, /* default */
noreferrer: true, /* default */
nofollow: false /* default */
},
specs: {
width: 800, /* window width */
height: 600, /* window height */
}
};
const App = () => {
const [handleWindowOpen, newWindowHandle] = useOpenInWindow();
return (
handleWindowOpen(ev, options)}>Click me
);
}
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 |
| security.noopener| Prevents the opened page from having access to the window.opener property | true |
| security.noreferrer| Prevents passing the referrer information to the opened page | true |
| security.nofollow| Instructs search engines not to follow the link | false |
| specs.width | The width of the window. Min. value is 100 (browser restriction). | 800 |
| specs.height | The height 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 |
| location | Whether or not to display the address field | null |
| menubar | Whether or not to display the menu bar | null |
| scrollbars | Whether or not to display scroll bars | yes |
| status | Whether or not to add a status bar | null |
| titlebar | Whether or not to display the title bar | null |
| toolbar | Whether or not to display the browser toolbar | null |
Dependencies 
--------
None. Self source code only. (❤️obvious peer dep on React only)
Reliability
--------
This package is fully tested with total coverage set to [](https://coveralls.io/github/bartlomiejzuber/use-open-window). If you found any issue please report it [here](https://github.com/bartlomiejzuber/use-open-window/issues/new).
License
--------
Made with :sparkling_heart: by [Bartlomiej Zuber ([email protected])](mailto:[email protected]) while traveling around the world, and licensed under the [MIT License](LICENSE)