Skip to content
This repository was archived by the owner on Dec 5, 2024. It is now read-only.

Commit 726ecb2

Browse files
author
Federico Zivolo
committed
docs: Added ReactDOM.createPortal example
1 parent 6776e88 commit 726ecb2

File tree

1 file changed

+35
-2
lines changed

1 file changed

+35
-2
lines changed

README.md

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Via `script` tag (UMD library exposed as `ReactPopper`):
3030
Example:
3131

3232
```jsx
33-
import { Manager, Reference, Popper } from "react-popper";
33+
import { Manager, Reference, Popper } from 'react-popper';
3434

3535
const Example = () => (
3636
<Manager>
@@ -132,6 +132,39 @@ modifiers?: PopperJS$Modifiers;
132132
An object containing custom settings for the [Popper.js modifiers](https://popper.js.org/popper-documentation.html#modifiers).
133133
You can use this property to override their settings or to inject your custom ones.
134134
135+
## Usage with `ReactDOM.createPortal`
136+
137+
Popper.js is smart enough to work even if the **popper** and **reference** elements aren't
138+
in the same DOM context.
139+
This means that you can use [`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html)
140+
(or any pre React 16 alternative) to move the popper component somewhere else in the DOM.
141+
142+
```jsx
143+
import { Manager, Reference, Popper } from 'react-popper';
144+
145+
const Example = () => (
146+
<Manager>
147+
<Reference>
148+
{props => (
149+
<button type="button" {...props}>
150+
Reference
151+
</button>
152+
)}
153+
</Reference>
154+
{ReactDOM.createPortal(
155+
<Popper>
156+
{({ placement, ...props }) => (
157+
<div {...props} data-placement={placement}>
158+
Popper
159+
</div>
160+
)}
161+
</Popper>,
162+
document.querySelector('#destination')
163+
)}
164+
</Manager>
165+
);
166+
```
167+
135168
## Usage without a reference `HTMLElement`
136169
137170
Whenever you need to position a popper based on some arbitrary coordinates, you can provide `Popper` with a `referenceElement` property that is going to be used in place of the `referenceProps.getRef` React ref.
@@ -141,7 +174,7 @@ The `referenceElement` property must be an object with an interface compatible w
141174
If `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.
142175
143176
```jsx
144-
import Popper from "react-popper";
177+
import { Popper } from 'react-popper';
145178

146179
class VirtualReference {
147180
getBoundingClientRect() {

0 commit comments

Comments
 (0)