Skip to content

Commit d67e71e

Browse files
committed
Document additional features
1 parent e76153d commit d67e71e

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,41 @@ You can also use a selector instead of an id.
7474
</ElementPortal>
7575
```
7676

77+
## Additional features
78+
The `shouldReset` prop can be used to remove any classes and styles from the DOM node we are rendering to:
79+
80+
```js
81+
// All styles and classes from the node with id "header" will be cleared
82+
<ElementPortal id="header" shouldReset>
83+
<div>
84+
...
85+
</div>
86+
</ElementPortal>
87+
```
88+
89+
`ElementPortal` also accepts an optional `view` prop that takes a component, to be rendered inside the portal:
90+
91+
```js
92+
<ElementPortal id="header" view="CoolHeaderComponent" />
93+
```
94+
95+
One advantage of using the `view` prop to specify a component is that any `data-` attributes from the DOM node the portal is rendering to will be passed along to our component as a `data` prop.
96+
For example, if the DOM node we are rendering to looks like this:
97+
98+
```html
99+
<div id="header" data-user-id="26742" data-name="Joe">
100+
...
101+
</div>
102+
```
103+
104+
Then our `CoolHeaderComponent` from the example above would receive the following `data` prop:
105+
106+
```js
107+
{
108+
'user-id': '26742',
109+
name: 'Joe'
110+
}
111+
```
112+
77113
## Passing context to your ElementPortal
78114
Context from your main tree is passed down automatically to your `ElementPortal`. For example, if you use Redux, the `store` context will not get lost, and using `connect` will behave as expected in the children of your `ElementPortal`.

0 commit comments

Comments
 (0)