react-popout-v2
v0.0.8
Published
React popout is a util to handle the popout windows with ease and supports IE
Downloads
657
Readme
react-popout-v2
React popout is a util to handle the popout windows with ease
Size of plugin is Just 10KB
Supports IE 11
Install
npm install --save react-popout-v2
Demo
Usage
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Popout from 'react-popout-v2'
const MyComponent = () => {
const [isOpen, setOpen] = useState(false)
return (
<>
{!isOpen && <button onClick={() => setOpen(true)}>Open Popout</button>}
{isOpen && (
<Popout
url={'#/popout'}
reactDom={ReactDOM}
children={<div>This is a content of new popout!</div>}
onClose={() => setOpen(false)}
/>
)}
</>
)
}
export default MyComponent
Props
reactDom: ReactDom [REQUIRED]
Pass react dom instance from parent component to popout. It helps to over come version discrepancy issue and reduce bundle size from 250KB to 10KB
id: String
Default value: react-popout
Unique ID to find different popouts. If you are using multiple popouts its mandatory tp provide id
url: String
Default value: about:black
Url to load in the popout, we can load another link or can be used to load the CSS.
title: String
Default value: react-popout
Title of the popout window
containerId: String
Default value: react-popout
Unique id for the popout content div.[Useful on CSS separation]
children: ReactComponents/ Function
Popout content elements or function which accepts the popout window as param
containerId: bool
Default value: false
Flag to close the popout on parent window unload event
options: object
Default value: {}
Object representing window options. See the docs for reference.
Example:
<Popout options={{left: '100px', top: '200px'}} />
By default 500px wide, 400px high and centered over the window hosting the react component.
You can also specify a function with signature (options, window) => { }
to perform calculations.
For example top is calculated with (o, w) => ((w.innerHeight - o.height) / 2) + w.screenY
onClose: Function
Callback on popout close event
onError: Function
Callback on popout creation error event
parentWindow: Object
Default value: window
Pass window object to open from given window, it default to current window object
onCreate: Function
Callback on popout creation event with param as created popout window
Note:
Cross origin url does not support onClose callBack and content display. It opens new window and onCreate callback will be called with created popout window instance.
License
MIT © sidharthancr