UNPKG

boundless-portal

Version:

A higher-order component for the rendering of components outside the normal React tree.

boundless.js.org/Portal

enigma-io/boundless

101 lines (64 loc) • 2.15 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--- THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-PORTAL/INDEX.JS INSTEAD. --> # Portal `Portal` is used in other components such as `Popover` to render content to places like the HTML `<body>` tag, avoiding style leakage and parent layout contexts. Only accepts a single top-level child; naked text, etc will be wrapped in a `<div>`. ## Installation ```bash npm i boundless-portal --save ``` Then use it like: ```js import Portal from 'boundless-portal'; ``` Portal can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Portal } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Portal). ### Required Props There are no required props. ### Optional Props - __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`children`__ &middot; any normal React child, but must be singular; multiple sibling children must have a common wrapper, such as a "layout" `<div>` ✅ OK: ```jsx <Portal> foo </Portal> <Portal> <div>foo</div> </Portal> <Portal> <div> <div>foo</div> <div>bar</div> </div> </Portal> ``` ⛔️ Not OK: ```jsx <Portal> <div>foo</div> <div>bar</div> </Portal> ``` Expects | Default Value --- | --- `any renderable` | `null` - __`destination`__ &middot; the location to append the generated portal and child elements Expects | Default Value --- | --- `HTMLElement` | `document.body` - __`portalId`__ &middot; the ID used to link the portal origin to the destination; added to generated `<div>` appended to the destination HTML node Expects | Default Value --- | --- `string` | `null`