Skip to content

Commit

Permalink
Experimental release.
Browse files Browse the repository at this point in the history
  • Loading branch information
rmariuzzo committed Nov 9, 2017
1 parent ddc6130 commit ae7ffc0
Show file tree
Hide file tree
Showing 22 changed files with 6,609 additions and 5 deletions.
28 changes: 28 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"env": {
"development": {
"presets": ["es2015", "react"],
"plugins": [
"syntax-object-rest-spread",
"transform-class-properties",
"transform-object-rest-spread"
]
},
"test": {
"presets": ["es2015", "react"],
"plugins": [
"syntax-object-rest-spread",
"transform-class-properties",
"transform-object-rest-spread"
]
},
"production": {
"presets": ["es2015-rollup", "react"],
"plugins": [
"syntax-object-rest-spread",
"transform-class-properties",
"transform-object-rest-spread"
]
}
}
}
2 changes: 2 additions & 0 deletions .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
7 changes: 7 additions & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { configure } from '@storybook/react';

function loadStories() {
require('../stories');
}

configure(loadStories, module);
58 changes: 55 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,60 @@
<div align=center>

# react-new-window
`window.open` in React!
# React New Window

Inspired by [David Gilbertson](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202)
Pop a new window React using window.open.

Inspired by [David Gilbertson's article](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202) (must read, must follow).

</div>

### Features

- **Only 3.3KB** (that's 1.4 gzipped!).
- **Support the full `window.open` api**.
- **Built for React 16** (uses `ReactDOM.createPortal`).
- **Handler for blocked popups** (via `onBlock` prop).
- **Center popups** according to the parent window or screen.

## Installation

- `npm install react-new-window --save`

or

- `yarn add react-new-window`

## Usage

```js
import React from 'react'
import NewWindow from 'react-new-window'

const Demo = () => (
<NewWindow>
<h1>Hi 👋</h1>
</NewWindow>
)
```

### Documentation

| Properties | Type | Default | Description |
| --- | --- | --- | --- |
| `url` | `String` | `` | The URL to open, if specified any `children` will be overriden ([more details on `url`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
| `name` | `String` | `` | The name of the window ([more details on `windowName`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
| `title` | `String` | `` | The title of the new window document. |
| `features` | `Object` | `{}` | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)). |
| `onUnload` | `Function` | `undefined` | A function to be triggered before the new window unload. |
| `onBlock` | `Function` | `undefined` | A function to be triggered when the new window could not be opened. |
| `center` | `String` | `parent` | Indicate how to center the new window. Valid values are: `parent` or `screen`. `parent` will center the new window according to its _parent_ window. `screen` will center the new window according to the _screen_. |

---

<div align=center>

Made with :hearth: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
2 changes: 2 additions & 0 deletions dist/react-new-window.esm.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/react-new-window.esm.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dist/react-new-window.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit ae7ffc0

Please sign in to comment.