https://github.com/Briggybros/styled-window-portal

A react portal which creates a new window and supports styled-components
https://github.com/Briggybros/styled-window-portal

Last synced: 3 months ago
JSON representation

A react portal which creates a new window and supports styled-components

• Host: GitHub
• URL: https://github.com/Briggybros/styled-window-portal
• Owner: Briggybros
• License: mit
• Created: 2018-01-02T17:14:47.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-14T17:30:22.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T04:05:03.911Z (4 months ago)
• Language: TypeScript
• Size: 2.63 MB
• Stars: 9
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - Briggybros/styled-window-portal - A react portal which creates a new window and supports styled-components (TypeScript)

README

        
# styled-window-portal

If a React portal is used to render to a new window, then styled-components will break as the styles declared are still being appended to the head of the original document. This package provides a component which changes the inject point of the style to the head of the new window and copies globally injected styles to the new window.

## [Example](https://github.com/Briggybros/styled-window-portal/blob/master/example/src/index.tsx)

## Props

The styled window component can take the following props

| Prop Name   | Type     | Default Value | Description                                    |

| ----------- | -------- | ------------- | ---------------------------------------------- |

| onClose     | function | N/A           | A function called when the window is closed    |

| onOpen      | function | N/A           | A function called when the window is opened    |

| title       | string   | New Window    | The title of the window                        |

| target      | string   | ' '           | The target attribute or the name of the window |

| windowProps | object   |               | See below                                      |

### windowProps

All values here can either be constant, or functions, the functions have the other options passed to them as the first parameter, and the main window as the second parameter. See descriptions at https://www.w3schools.com/jsref/met_win_open.asp

| Prop Name   | Type                | Default Value     |

| ----------- | ------------------- | ----------------- |

| toolbar     | boolean \| function | false             |

| location    | boolean \| function | false             |

| directories | boolean \| function | false             |

| menubar     | boolean \| function | false             |

| scrollbars  | boolean \| function | true              |

| resizable   | boolean \| function | true              |

| width       | number \| function  | 500               |

| height      | number \| function  | 400               |

| top         | number \| function  | function (center) |

| left        | number \| function  | function (center) |