GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rmariuzzo → React New Window

rmariuzzo / React New Window

Licence: mit
🔲 Pop new windows in React, using `window.open`.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactreact-componentpopuppopup-window

Projects that are alternatives of or similar to React New Window

Needs
🌂 An easy way to implement modern permission instructions popup.
Stars: ✭ 546 (+94.31%)
Mutual labels:  popup, popup-window
Jalert
jQuery alert/modal/lightbox plugin
Stars: ✭ 73 (-74.02%)
Mutual labels:  popup, popup-window
Xpopup
🔥XPopup2.0版本重磅来袭，2倍以上性能提升，带来可观的动画性能优化和交互细节的提升！！！功能强大，交互优雅，动画丝滑的通用弹窗！可以替代Dialog，PopupWindow，PopupMenu，BottomSheet，DrawerLayout，Spinner等组件，自带十几种效果良好的动画， 支持完全的UI和动画自定义！(Powerful and Beautiful Popup for Android，can absolutely replace Dialog，PopupWindow，PopupMenu，BottomSheet，DrawerLayout，Spinner. With built-in animators , very easy to custom popup v…
Stars: ✭ 6,106 (+2072.95%)
Mutual labels:  popup, popup-window
Popbox.js
A tiny and simple stackable modal plugin for web apps
Stars: ✭ 295 (+4.98%)
Mutual labels:  popup, popup-window
WechatPopupWindow
高仿微信聊天界面长按弹框样式
Stars: ✭ 71 (-74.73%)
Mutual labels:  popup-window, popup
Basepopup
Android下打造通用便捷的PopupWindow弹窗库
Stars: ✭ 4,603 (+1538.08%)
Mutual labels:  popup, popup-window
Cdalertview
Highly customizable alertview and alert/notification/success/error/alarm popup written in Swift
Stars: ✭ 1,056 (+275.8%)
Mutual labels:  popup, popup-window
Popupwindow
PopupWindow is a simple Popup using another UIWindow in Swift
Stars: ✭ 401 (+42.7%)
Mutual labels:  popup, popup-window
react-layer-stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 158 (-43.77%)
Mutual labels:  react-component, popup
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-45.91%)
Mutual labels:  react-component, popup
Powermenu
🔥 The powerful and easiest way to implement modern material popup menu.
Stars: ✭ 822 (+192.53%)
Mutual labels:  popup, popup-window
BalloonPopup
Forget Android Toast! BalloonPopup displays a round or squared popup and attaches it to a View, like a callout. Uses the Builder pattern for maximum ease. The popup can automatically hide and can persist when the value is updated.
Stars: ✭ 32 (-88.61%)
Mutual labels:  popup-window, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+345.2%)
Mutual labels:  popup, popup-window
ToolTipPopupWordTV
ToolTipopupWordTV is an Open Source Android library that allows developers to easily open a popup with details by select a word from a textview.
Stars: ✭ 41 (-85.41%)
Mutual labels:  popup-window, popup
Wpopup
一个简单使用并且高度定制的Popupwindow。超简单实现朋友圈点赞效果，并且只用一个WPopup！完全不用担心复用问题！点击切换动画效果等！
Stars: ✭ 269 (-4.27%)
Mutual labels:  popup, popup-window
NBBottomSheet
An iOS library that presents a bottom sheet using Auto Layout.
Stars: ✭ 60 (-78.65%)
Mutual labels:  popup
Flawwwless Ui
Flawwwless ui library for React.js.
Stars: ✭ 265 (-5.69%)
Mutual labels:  react-component
react-crossword
A flexible, responsive, and easy-to-use crossword component for React apps.
Stars: ✭ 80 (-71.53%)
Mutual labels:  react-component
Razor.SweetAlert2
A Razor class library for interacting with SweetAlert2
Stars: ✭ 98 (-65.12%)
Mutual labels:  popup
Seapig
🌊🐷 Utility for generalized composition of React components
Stars: ✭ 269 (-4.27%)
Mutual labels:  react-component
View All Similar Projects ➔

React New Window - Pop new windows in React, using window.open API.

Inspired by David Gilbertson's article.

Features

  • Only 2.68KB (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 i react-new-window --save

Usage

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

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

When <NewWindow /> is mounted a popup window will be opened. When unmounted then the popup will be closed.

The children contents is what will be rendered into the new popup window. In that case Hi 👋 will be the content. The content can include any react-stateful code.

Documentation

Properties Type Default Description
url String The URL to open, if specified any children will be overriden (more details on url).
name String The name of the window (more details on windowName).
title String The title of the new window document.
features Object {} The set of window features (more details on windowFeatures).
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.
copyStyles Boolean true If specified, copy styles from parent window's document.

Tests

Tests are manually done using Storybook. It can be run locally with: yarn storybook.

Development

To start contributing to this project, please do:

  1. Fork and clone this repo.
  2. Do your work.
  3. Create a PR.

Releases

npm version

Prior work

Made with ❤️ by Rubens Mariuzzo.

MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].