This is a fork of the react-popout-component. Microsoft did the 95% of the work, but their repo went stale in 2018.
This is a React component designed for React 16 with complete Typescript support.
- This is developed alongside the React 16 fix to allow mounting across frames even for Edge and IE browsers
- Typescript support for all the options (especially hard to remember window features)
- Reflects style-loader injected styles from the main window to the children window
npm install react-portal-popout
or
yarn add react-portal-popout
import React from 'react';
import { Popout } from 'react-portal-popout';
export default class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {showPopout: false};
}
onClick = () => {
this.setState({showPopout: true});
}
render() {
return (
<div>
<h1>Now you too have the power to POP OUT</h1>
<button onClick={this.onClick}>POP IT OUT!</button>
{this.state.showPopout && (
<Popout>
<div>You can put anything here!</div>
</Popout>
)}
</div>
);
}
}
Popout Component has the following props:
export interface PopoutProps {
hidden?: boolean;
name?: string; // window.name
title?: string; // document.title
onClose?: () => void;
onBeforeUnload?: (evt: BeforeUnloadEvent) => string | null | undefined;
children?: any;
options?: Partial<WindowFeaturesOptions>;
html?: string;
}
The options
prop is of the following type:
export interface WindowFeaturesOptions {
left: number;
top: number;
height: number;
width: number;
menubar: boolean;
toolbar: boolean;
location: boolean;
status: boolean;
resizable: boolean;
scrollbars: boolean;
}
This component works well for both modes of style loading:
- Appending Style blocks (e.g. style-loader)
- Manual insertRule() into a CSSStyleSheet
For the second case with insertRule(), since there is nothing that can observe the insert event, a callback must be registered when a rule is being inserted. For an example usage with the Microsoft Office Fabric, set it up as a global like so:
import {insertPopoutStylesheetRule} from 'react-portal-popout';
window.FabricConfig = {
mergeStyles: {
onInsertRule: insertPopoutStylesheetRule
}
}
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct.
For more information see the Code of Conduct FAQ or
contact opencode@microsoft.com with any additional questions or comments.