fix: add usePopper TS types

Author: FezVrasta

typings/react-popper.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as PopperJS from "@popperjs/core";
+import * as React from 'react';
+import * as PopperJS from '@popperjs/core';
 
 interface ManagerProps {
   children: React.ReactNode;
 }
-export class Manager extends React.Component<ManagerProps, {}> { }
+export class Manager extends React.Component<ManagerProps, {}> {}
 
 interface ReferenceChildrenProps {
   // React refs are supposed to be contravariant (allows a more general type to be passed rather than a more specific one)
@@ -17,7 +17,7 @@ interface ReferenceProps {
   children: (props: ReferenceChildrenProps) => React.ReactNode;
   innerRef?: React.Ref<any>;
 }
-export class Reference extends React.Component<ReferenceProps, {}> { }
+export class Reference extends React.Component<ReferenceProps, {}> {}
 
 export interface PopperArrowProps {
   ref: React.Ref<any>;
@@ -44,6 +44,20 @@ export interface PopperProps {
   placement?: PopperJS.Placement;
   strategy?: PopperJS.PositioningStrategy;
   referenceElement?: HTMLElement | PopperJS.VirtualElement;
-  onFirstUpdate?: (state: Partial<PopperJS.State>) => void
+  onFirstUpdate?: (state: Partial<PopperJS.State>) => void;
 }
-export class Popper extends React.Component<PopperProps, {}> { }
+export class Popper extends React.Component<PopperProps, {}> {}
+
+export function usePopper(
+  referenceElement?: Element | null,
+  popperElement?: HTMLElement | null,
+  options?: Partial<PopperJS.Options> & {
+    createPopper?: typeof PopperJS.createPopper;
+  }
+): {
+  styles: { [key: string]: React.CSSProperties };
+  attributes: { [key: string]: { [key: string]: string } };
+  state: PopperJS.State;
+  update: Pick<PopperJS.Instance, 'update'>;
+  forceUpdate: Pick<PopperJS.Instance, 'forceUpdate'>;
+};

typings/tests/main-test.tsx

@@ -2,7 +2,7 @@
 // be found under `/src/__typings__` please. Thanks! 🤗
 
 import * as React from 'react';
-import { Manager, Reference, Popper } from '../..';
+import { Manager, Reference, Popper, usePopper } from '../..';
 
 export const Test = () => (
   <Manager>
@@ -23,7 +23,10 @@ export const Test = () => (
       }) => (
         <div
           ref={ref}
-          style={{ ...style, opacity: (isReferenceHidden || hasPopperEscaped) ? 0 : 1 }}
+          style={{
+            ...style,
+            opacity: isReferenceHidden || hasPopperEscaped ? 0 : 1,
+          }}
           data-placement={placement}
           onClick={() => update()}
         >
@@ -41,3 +44,32 @@ export const Test = () => (
     </Popper>
   </Manager>
 );
+
+const HookTest = () => {
+  const [
+    referenceElement,
+    setReferenceElement,
+  ] = React.useState<Element | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLElement | null>(
+    null
+  );
+  const [arrowElement, setArrowElement] = React.useState<HTMLElement | null>(
+    null
+  );
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
+  });
+
+  return (
+    <>
+      <button type="button" ref={setReferenceElement}>
+        Reference element
+      </button>
+
+      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+        Popper element
+        <div ref={setArrowElement} style={styles.arrow} />
+      </div>
+    </>
+  );
+};