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

Commit be4d0dc

Browse files
authored
docs: update README for v2
1 parent 304fe84 commit be4d0dc

File tree

1 file changed

+13
-39
lines changed

1 file changed

+13
-39
lines changed

README.md

Lines changed: 13 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,14 @@ familiar with it, please read more [on the official React documentation](https:/
7171
The `Manager` component is a simple wrapper that needs to surround all the other `react-popper` components in order
7272
to make them communicate with each others.
7373

74-
The `Popper` component accepts the properties `children`, `placement`, `modifiers`, `eventsEnabled` and `positionFixed`.
74+
The `Popper` component accepts the properties `children`, `placement`, `modifiers` and `strategy`.
7575

7676
```jsx
7777
<Popper
7878
innerRef={(node) => this.popperNode = node}
7979
placement="right"
80-
modifiers={{ preventOverflow: { enabled: false } }}
81-
eventsEnabled={true}
82-
positionFixed={false}
80+
modifiers={[{ name: 'preventOverflow', enabled: false }]}
81+
strategy="fixed"
8382
>
8483
{ props => [...] }
8584
</Popper>
@@ -92,8 +91,9 @@ children: ({|
9291
ref: (?HTMLElement) => void,
9392
style: { [string]: string | number },
9493
placement: ?Placement,
95-
outOfBoundaries: ?boolean,
96-
scheduleUpdate: () => void,
94+
isReferenceHidden: ?boolean,
95+
hasPopperEscaped: ?boolean,
96+
update: () => void,
9797
arrowProps: {
9898
ref: (?HTMLElement) => void,
9999
style: { [string]: string | number },
@@ -109,8 +109,9 @@ A function (render prop) that takes as argument an object containing the followi
109109
that may have flipped or altered the originally provided `placement` property. You can use this to alter the
110110
style of the popper and or of the arrow according to the definitive placement. For instance, you can use this
111111
property to orient the arrow to the right direction.
112-
- **`outOfBoundaries`**: a boolean signifying if the popper element is overflowing its boundaries.
113-
- **`scheduleUpdate`**: a function you can call to schedule a Popper.js position update. It will directly call the [Popper#scheduleUpdate](https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate) method.
112+
- **`isReferenceHidden`**: a boolean signifying the reference element is fully clipped and hidden from view.
113+
- **`hasPopperEscaped`**: a boolean signifying the popper escapes the reference element's boundary (and so it appears detached).
114+
- **`update`**: a function you can ask Popper to recompute your tooltip's position . It will directly call the [Popper#update](https://popper.js.org/docs/v2/lifecycle/#manual-update) method.
114115
- **`arrowProps`**: an object, containing `style` and `ref` properties that are identical to the
115116
ones provided as the first and second arguments of `children`, but relative to the **arrow** element. The `style` property contains `left` and `top` offset values, which are used to center the arrow within the popper. These values can be merged with further custom styling and positioning. See [the demo](https://github.com/FezVrasta/react-popper/blob/8994933c430e48ab62e71495be71e4f440b48a5a/demo/styles.js#L100) for an example.
116117
@@ -132,36 +133,17 @@ One of the accepted placement values listed in the [Popper.js documentation](htt
132133
Your popper is going to be placed according to the value of this property.
133134
Defaults to `bottom`.
134135
135-
##### `outOfBoundaries`
136+
##### `strategy`
136137
137-
```js
138-
outOfBoundaries: ?boolean;
139-
```
140-
141-
A boolean that can be used to hide the popper element in case it's overflowing
142-
from its boundaries. [Read more](https://popper.js.org/popper-documentation.html#modifiers..hide).
143-
144-
##### `eventsEnabled`
145-
146-
```js
147-
eventsEnabled?: boolean;
148-
```
149-
150-
Tells `react-popper` to enable or disable the [Popper.js event listeners](https://popper.js.org/popper-documentation.html#Popper.Defaults.eventsEnabled). `true` by default.
151-
152-
##### `positionFixed`
153-
154-
Set this property to `true` to tell Popper.js to use the `position: fixed` strategy
155-
to position the popper element. By default it's false, meaning that it will use the
156-
`position: absolute` strategy.
138+
Describes the positioning strategy to use. By default, it is `absolute`, which in the simplest cases does not require repositioning of the popper. If your reference element is in a `fixed` container, use the `fixed` strategy. [Read More](https://popper.js.org/docs/v2/constructors/#strategy)
157139
158140
##### `modifiers`
159141
160142
```js
161143
modifiers?: PopperJS$Modifiers;
162144
```
163145
164-
An object containing custom settings for the [Popper.js modifiers](https://popper.js.org/popper-documentation.html#modifiers).
146+
An object containing custom settings for the [Popper.js modifiers](https://popper.js.org/docs/v2/modifiers/).
165147
You can use this property to override their settings or to inject your custom ones.
166148
167149
## Usage with `ReactDOM.createPortal`
@@ -205,7 +187,7 @@ const Example = () => (
205187
206188
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.
207189
208-
The `referenceElement` property must be an object with an interface compatible with an `HTMLElement` as described in the [Popper.js referenceObject documentation](https://popper.js.org/popper-documentation.html#referenceObject), this implies that you may also provide a real HTMLElement if needed.
190+
The `referenceElement` property must be an object with an interface compatible with an `HTMLElement` as described in the [Popper.js virtualElement documentation](https://popper.js.org/docs/v2/virtual-elements/), this implies that you may also provide a real HTMLElement if needed.
209191
210192
If `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.
211193
@@ -223,14 +205,6 @@ class VirtualReference {
223205
height: 10,
224206
};
225207
}
226-
227-
get clientWidth() {
228-
return this.getBoundingClientRect().width;
229-
}
230-
231-
get clientHeight() {
232-
return this.getBoundingClientRect().height;
233-
}
234208
}
235209

236210
// This is going to create a virtual reference element

0 commit comments

Comments
 (0)