Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-detachable-window with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactDetachableWindow = require("react-detachable-window")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-detachable-window v0.5.10

Wrap a portion of the DOM or a group of react components and make it detachable into a new window

react-detachable-window

ReactDetachableWindow wraps a portion of the DOM or a group of react components and make it detachable from current window frame into a new window it takes care to copy the stylesheets and title from the original frame into the new window or you can define your own

See a live example

Install:

npm i react-detachable-window

Use:

import ReactDetachableWindow from 'react-detachable-window'
<ReactDetachableWindow title='I am detached!' windowOptions={{width: 800, height: 600}}>
    <!-- DOM defined here can be detached to a new popup window and re-attached-->
</ReactDetachableWindow>

Component properties

  • windowOptions - Optional: A hash of options passed to the window.open(URL, name, specs, replace) 'specs' parameter
  • title - Optional: A string title for the new window
  • reattachButton - Optional: A jsx element which, when clicked, closes the popup window
  • detachButton - Optional: A jsx element which, when clicked, opens the popup window

TODO List

  • copy a complete set of attributes from original window into the new popup
  • allow property to define the containing DOM for the detachable portion in the new popup
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free