feat: Added support for positionFixed option

Author: Federico Zivolo

README.md

@@ -63,13 +63,14 @@ familiar with it, please read more [on the official React documentation](https:/
 The `Manager` component is a simple wrapper that needs to surround all the other `react-popper` components in order
 to make them communicate with each others.
 
-The `Popper` component accepts the properties `children`, `placement`, `modifiers`, and `eventsEneabled`.
+The `Popper` component accepts the properties `children`, `placement`, `modifiers`, `eventsEneabled` and `positionFixed`.
 
 ```jsx
 <Popper
   placement="right"
   modifiers={{ preventOverflow: { enabled: false } }}
   eventsEnabled={true}
+  positionFixed={false}
 >
     { props => [...] }
 </Popper>
@@ -128,6 +129,12 @@ eventsEnabled?: boolean;
 
 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.
 
+##### `positionFixed`
+
+Set this property to `true` to tell Popper.js to use the `position: fixed` strategy
+to position the popper element. By default it's false, meaning that it will use the
+`position: absolute` strategy.
+
 ##### `modifiers`
 
 ```js

src/Popper.js

@@ -30,6 +30,7 @@ type PopperProps = {
   modifiers?: Modifiers,
   placement?: Placement,
   eventsEnabled?: boolean,
+  positionFixed?: boolean,
   referenceElement?: ReferenceElement,
   children: RenderProp,
 };
@@ -54,6 +55,7 @@ export class Popper extends Component<PopperProps, PopperState> {
     placement: 'bottom',
     eventsEnabled: true,
     referenceElement: undefined,
+    positionFixed: false,
   };
 
   state = {
@@ -78,6 +80,7 @@ export class Popper extends Component<PopperProps, PopperState> {
   getOptions = () => ({
     placement: this.props.placement,
     eventsEnabled: this.props.eventsEnabled,
+    positionFixed: this.props.positionFixed,
     modifiers: {
       ...this.props.modifiers,
       arrow: {
@@ -151,7 +154,8 @@ export class Popper extends Component<PopperProps, PopperState> {
         this.props.eventsEnabled !== prevProps.eventsEnabled ||
         this.state.arrowNode !== prevState.arrowNode ||
         this.state.popperNode !== prevState.popperNode ||
-        this.props.referenceElement !== prevProps.referenceElement
+        this.props.referenceElement !== prevProps.referenceElement ||
+        this.props.positionFixed !== prevProps.positionFixed
       ) {
         this.updatePopperInstance();
       }

src/__snapshots__/Popper.test.js.snap

@@ -4,6 +4,7 @@ exports[`Popper component renders the expected markup 1`] = `
 <Popper
   eventsEnabled={true}
   placement="bottom"
+  positionFixed={false}
   referenceElement={<div />}
 >
   <div

typings/react-popper.d.ts

@@ -17,6 +17,7 @@ interface PopperProps {
   modifiers?: PopperJS.Modifiers;
   placement?: PopperJS.Placement;
   eventsEnabled?: boolean;
+  positionFixed?: boolean;
   children: (props: ({
     ref: (ref: HTMLElement | null) => void,
     style: React.CSSProperties,

typings/tests/main-test.tsx

@@ -4,7 +4,11 @@ import { Manager, Reference, Popper } from '../..';
 const Test = () => (
   <Manager>
     <Reference>{({ ref }) => <div ref={ref} />}</Reference>
-    <Popper>
+    <Popper
+      eventsEnabled
+      positionFixed
+      modifiers={{ flip: { enabled: false } }}
+    >
       {({ ref, style, placement, scheduleUpdate, arrowProps }) => (
         <div
           ref={ref}