react-window-renderer

Introducing a new feature in React that allows developers to render part of a component in a new browser tab or window. This functionality is particularly useful for displaying large content across two related windows, enhancing the user experience when working with dual screens in extended mode. Ideal for scenarios where users need to view or interact with content simultaneously across multiple screens.

Demo

Demo preview

[!CAUTION] This package is under development, you might face some buggy behaver

Support

support me to keep this work up by buying me a coffee

Installation

npm i react-window-renderer

Examples

example with button open/close

import { RenderInWindow, useRenderInWindow } from "react-window-renderer";

const BasicUsageExample = () => {
  const { open, setOpen, _window } = useRenderInWindow();

  return (
    <>
      <h1>React Window Renderer Basic Example</h1>
      <RenderInWindow
        open={open}
        setOpen={setOpen}
        returnWindow={(w) => (_window.current = w)}
      >
        <div>Render this content in new window</div>
      </RenderInWindow>
      <button onClick={() => setOpen(!open)}>
        {open ? "Close Window" : "Open Window"}
      </button>
    </>
  );
};

export default BasicUsageExample;

example with enable open/close icons

import { RenderInWindow, useRenderInWindow } from "react-window-renderer";

const BasicNoCssUsageExample = () => {
  const { open, setOpen, _window } = useRenderInWindow();

  return (
    <>
      <h1>React Window Renderer Basic Example</h1>
      <RenderInWindow
        open={open}
        setOpen={setOpen}
        showCloseWindowIcon
        showOpenWindowIcon
        showChilderWhenClose
        returnWindow={(w) => (_window.current = w)}
        extraHeadHTMLTags={[<style ref="" />]}
      >
        <div>Render this content in new window</div>
      </RenderInWindow>
    </>
  );
};

export default BasicNoCssUsageExample;

Props Table for RenderInWindow Component

| Prop | Default Value | Required/Optional | Explanation | | ----------------------- | ------------------------------------------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | open | - | Required | Controls whether the window is currently open or closed. A boolean value indicating the state. | | setOpen | - | Required | A React state setter function used to toggle the window's open state. This function updates the open prop. | | children | - | Required | The JSX Element(s) that will be rendered inside the new window. Must be provided for the component to function. | | returnWindow | - | Required | A callback function that receives the newly opened window object, allowing further manipulation if needed. | | showChilderWhenClose | false | Optional | If true, the children will be showen when the window is closed, ensuring they are displayed in the original component. | | showOpenWindowIcon | false | Optional | If true, an icon will be displayed to indicate the option to open the window. Useful for improving user experience. | | openWindowIconConfig | see IIconConfig | Optional | Configuration for the open window icon, allowing you to set width and height. Defaults to 30px by 30px. | | showCloseWindowIcon | false | Optional | If true, an icon will be shown to allow the user to close the window. Enhances usability by providing a visual cue. | | closeWindowIconConfig | see IIconConfig | Optional | Configuration for the close window icon, allowing you to set width and height. Defaults to 30px by 30px. | | windowConfig | see IWindowConfig | Optional | Configuration object for the window's properties such as width, height, position, and other window features (toolbar, menubar, etc.). | | extraHeadHTMLTags | - | Optional, Experimental | An array of JSX elements (e.g. <style> or <script>) that will be injected into the window's head section. Experimental and subject to change. |

Props Table for IWindowConfig Object

| Prop | Default Value | Required/Optional | Explanation | | ------------ | --------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- | | url | undefined | Optional | URL of the window. | | left | 0 or screen.width | Optional | The distance from the left of the screen to the window. Defaults to the full screen width or 0 if popup is true. | | top | 0 | Optional | The distance from the top of the screen to the window. Defaults to 0. | | height | screen.height | Optional | The height of the window. Defaults to the full screen height. | | width | screen.width | Optional | The width of the window. Defaults to the full screen width. | | menubar | "no" | Optional | Enables or disables the menubar in the window. | | toolbar | "no" | Optional | Enables or disables the toolbar in the window. | | location | "no" | Optional | Enables or disables the location bar in the window. | | status | "no" | Optional | Enables or disables the status bar in the window. | | resizable | "yes" | Optional | Enables or disables the window resizing feature. | | scrollbars | "no" | Optional | Enables or disables scrollbars in the window. | | popup | true | Optional | Determines if the window should be rendered as a popup. If false, it will render in a new tab. |

Props Table for IIconConfig Object

| Prop | Default Value | Required/Optional | Explanation | | -------- | ------------- | ----------------- | --------------------------------- | | width | 30 | Optional | The width of the icon in pixels. | | height | 30 | Optional | The height of the icon in pixels. |

License

MIT

Author

Mohammed Ridha. M. M.