@popperjs/core#Instance TypeScript Examples

private popper: Instance;

popper: Instance | null = null

usePopper = (
  referenceElement: HTMLElement | null,
  popperElement: HTMLElement | null,
  options: Partial<PopperOptions> = {}
) => {
  const prevOptions = React.useRef<PopperOptions>();
  const optionsWithDefaults: PopperOptions = {
    ...defaultPopperOptions,
    ...options,
  };
  const [state, setState] = React.useState<
    Pick<PopperState, "styles" | "attributes">
  >({
    styles: {
      popper: {
        position: optionsWithDefaults.strategy,
        left: "0",
        top: "0",
      },
    },
    attributes: {},
  });

  const updateStateModifier = React.useMemo(
    () => ({
      name: "updateState" as const,
      enabled: true,
      phase: "write" as const,
      fn: ({
        state: newState,
      }: {
        /** The current popper state */
        state: PopperState;
      }) => {
        const elements = Object.keys(newState.elements);

        setState({
          styles: fromEntries(
            elements.map((element) => [element, newState.styles[element] || {}])
          ),
          attributes: fromEntries(
            elements.map((element) => [element, newState.attributes[element]])
          ),
        });
      },
      requires: ["computeStyles"],
    }),
    []
  );

  const popperOptions = React.useMemo(() => {
    const newOptions: PopperOptions = {
      ...optionsWithDefaults,
      modifiers: [
        ...optionsWithDefaults.modifiers,
        updateStateModifier,
        { name: "applyStyles", enabled: false },
      ],
    };

    if (isEqual(prevOptions.current, newOptions)) {
      return prevOptions.current || newOptions;
    }

    prevOptions.current = newOptions;
    return newOptions;
  }, [optionsWithDefaults, updateStateModifier]);

  const popperInstanceRef = React.useRef<Instance>();

  /** If the options change on the hook change them on the popper instance too */
  useLayoutEffect(() => {
    popperInstanceRef.current?.setOptions(popperOptions);
  }, [popperOptions]);

  /** Create the popper instance. Recreate it when the reference/popper elements change */
  useLayoutEffect(() => {
    if (!referenceElement || !popperElement) {
      return;
    }

    const popperInstance = createPopperLite(
      referenceElement,
      popperElement,
      popperOptions
    );

    popperInstanceRef.current = popperInstance;

    return () => {
      popperInstance.destroy();
      popperInstanceRef.current = undefined;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [referenceElement, popperElement, createPopperLite]);

  return {
    styles: state.styles as { [key: string]: React.CSSProperties },
    attributes: state.attributes,
    popperInstanceRef,
  };
}

Tooltip = observer(({ children: Inner, Popup }: TooltipProps) => {
  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const [instance, setInstance] = useState<Instance | null>(null);

  let ctx = usePlugin(TooltipPlugin);
  let [id] = useState(_.uniqueId());
  let [stage, setStage] = useState("start");
  let [show, setShow] = useState(false);

  let trigger: React.MouseEventHandler = e => {
    e.preventDefault();

    if (show) {
      setShow(false);
    } else {
      if (stage == "start") {
        setStage("mount");
      }
      ctx.queueUpdate(id);
    }
  };

  useEffect(() => {
    if (stage == "mount" && referenceElement && popperElement) {
      setStage("done");

      // TODO: I noticed that when embedding a document within another,
      //   the nested-document tooltips on math elements would be misaligned.
      //   Unclear why, but a fix was to use the popperjs "virtual element"
      //   feature that manually calls getBoundingClientRect(). Probably an issue
      //   with whatever their getBoundingClientRect alternative is?
      let popperRefEl = {
        getBoundingClientRect: () => referenceElement.getBoundingClientRect(),
      };

      let instance = createPopper(popperRefEl, popperElement, {
        placement: "top",
        modifiers: [
          // Push tooltip farther away from content
          { name: "offset", options: { offset: [0, 10] } },

          // Add arrow
          { name: "arrow", options: { element: arrowElement } },
        ],
      });
      setInstance(instance);

      ctx.elts[id] = {
        popperElement,
        referenceElement: popperRefEl,
        instance,
        setShow,
      };
      ctx.checkQueue();
    }
  }, [stage, referenceElement, popperElement]);

  let inner = isConstructor(Inner) ? (
    <Inner ref={setReferenceElement} onClick={trigger} />
  ) : (
    <Container ref={setReferenceElement} onClick={trigger}>
      {Inner}
    </Container>
  );

  return (
    <>
      {inner}
      {stage != "start" ? (
        <ToplevelElem>
          <div
            className="tooltip"
            ref={setPopperElement}
            style={
              {
                ...(stage == "done" ? instance!.state.styles.popper : {}),
                // Have to use visibility instead of display so tooltips can
                // correctly compute position for stacking
                visibility: show ? "visible" : "hidden",
              } as any
            }
            {...(stage == "done" ? instance!.state.attributes.popper : {})}
          >
            <div
              className="arrow"
              ref={setArrowElement}
              style={{
                // Can't use visibility here b/c it messes with the special CSS for arrows
                display: show ? "block" : "none",
              }}
            />
            {getOrRender(Popup, {})}
          </div>
        </ToplevelElem>
      ) : null}
    </>
  );
})