feat: Added support for scheduleUpdate

Author: Federico Zivolo

README.md

@@ -82,6 +82,7 @@ children: ({|
   ref: (?HTMLElement) => void,
   style: { [string]: string | number },
   placement: ?Placement,
+  scheduleUpdate: () => void,
   arrowProps: {
     ref: (?HTMLElement) => void,
     style: { [string]: string | number },
@@ -103,6 +104,8 @@ that may have flipped or altered the originally provided `placement` property. Y
 style of the popper and or of the arrow according to the definitive placement. For instance, you can use this
 property to orient the arrow to the right direction.
 
+`scheduleUpdate` is 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.
+
 The `arrowProps` argument is an object, containing a `style` and `ref` properties that are identical to the
 ones provided as first and second argument of `children`, but are relative to the **arrow** element rather than
 the popper. Use them to, accordingly, retrieve the ref of the **arrow** element and style it.
@@ -147,16 +150,16 @@ import { Manager, Reference, Popper } from 'react-popper';
 const Example = () => (
   <Manager>
     <Reference>
-      {props => (
-        <button type="button" {...props}>
+      {({ ref }) => (
+        <button type="button" ref={ref}>
           Reference
         </button>
       )}
     </Reference>
     {ReactDOM.createPortal(
       <Popper>
-        {({ placement, ...props }) => (
-          <div {...props} data-placement={placement}>
+        {({ placement, ref, style }) => (
+          <div ref={ref} style={style} data-placement={placement}>
             Popper
           </div>
         )}

src/Popper.js

@@ -4,6 +4,7 @@ import PopperJS, {
   type Placement,
   type Instance as PopperJS$Instance,
   type Data,
+  type Modifiers,
   type ReferenceObject,
 } from 'popper.js';
 import { ManagerContext } from './Manager';
@@ -18,18 +19,15 @@ type RenderProp = ({|
   ref: getRefFn,
   style: Style,
   placement: ?Placement,
+  scheduleUpdate: () => void,
   arrowProps: {
     ref: getRefFn,
     style: Style,
   },
-
-  
 |}) => Node;
 
 type PopperProps = {
-  modifiers?: {
-    [string]: { order: number, enabled: boolean, fn: Object => Object },
-  },
+  modifiers?: Modifiers,
   placement?: Placement,
   eventsEnabled?: boolean,
   referenceElement?: ReferenceElement,
@@ -135,6 +133,12 @@ export class Popper extends Component<PopperProps, PopperState> {
     }
   };
 
+  scheduleUpdate = () => {
+    if (this.state.popperInstance) {
+      this.state.popperInstance.scheduleUpdate();
+    }
+  };
+
   componentDidUpdate(prevProps: PopperProps, prevState: PopperState) {
     // If needed, initialize the Popper.js instance
     // it will return `true` if it initialized a new instance, or `false` otherwise
@@ -165,6 +169,7 @@ export class Popper extends Component<PopperProps, PopperState> {
       ref: this.setPopperNode,
       style: this.getPopperStyle(),
       placement: this.getPopperPlacement(),
+      scheduleUpdate: this.scheduleUpdate,
       arrowProps: {
         ref: this.setArrowNode,
         style: this.getArrowStyle(),

typings/react-popper.d.ts

@@ -21,6 +21,7 @@ interface PopperProps {
     ref: (ref: HTMLElement | null) => void,
     style: React.CSSProperties,
     placement: ?PopperJS.Placement,
+    scheduleUpdate: () => void,
     arrowProps: {
       ref: (ref: HTMLElement | null) => void,
       style: React.CSSProperties,

typings/tests/main-test.tsx

@@ -3,23 +3,26 @@ import { Manager, Reference, Popper } from '../..';
 
 const Test = () => (
   <Manager>
-    <Reference>
-      {({ ref }) => <div ref={ref} />}
-    </Reference>
+    <Reference>{({ ref }) => <div ref={ref} />}</Reference>
     <Popper>
-      {({ ref, style, placement, arrowProps }) =>
-        <div ref={ref} style={style} data-placement={placement}>
+      {({ ref, style, placement, scheduleUpdate, arrowProps }) => (
+        <div
+          ref={ref}
+          style={style}
+          data-placement={placement}
+          onClick={() => scheduleUpdate()}
+        >
           Popper
           <div ref={arrowProps.ref} style={arrowProps.style} />
         </div>
-      }
+      )}
     </Popper>
     <Popper>
-      {({ ref, style, placement }) =>
+      {({ ref, style, placement }) => (
         <div ref={ref} style={style} data-placement={placement}>
           Popper
         </div>
-      }
+      )}
     </Popper>
   </Manager>
-)
+);