Lazy Tippy

LazyTippy.jsx

// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.
// Replace <Tippy /> with <LazyTippy /> component and it should work the same.

const LazyTippy = forwardRef((props, ref) => {
  const [mounted, setMounted] = useState(false);

  const lazyPlugin = {
    fn: () => ({
      onMount: () => setMounted(true),
      onHidden: () => setMounted(false),
    }),
  };

  const computedProps = {...props};

  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])];

  if (props.render) {
    computedProps.render = (...args) => (mounted ? props.render(...args) : '');
  } else {
    computedProps.content = mounted ? props.content : '';
  }

  return <Tippy {...computedProps} ref={ref} />;
});

LazyTippySingleton.jsx

// Partially lazy
// Will only mount all <Tippy /> content once the singleton itself is mounted.
function PartiallyLazySingleton() {
  const [source, target] = useSingleton();
  const [mounted, setMounted] = useState(false);

  return (
    <>
      <Tippy
        onShow={() => setMounted(true)}
        onHidden={() => setMounted(false)}
        singleton={source}
      />

      <Tippy content={mounted ? <ExpensiveComponent /> : ''} singleton={target}>
        <button>Hello</button>
      </Tippy>
      <Tippy content={mounted ? <ExpensiveComponent /> : ''} singleton={target}>
        <button>Hello</button>
      </Tippy>
    </>
  );
}

// Fully lazy
// Will only mount the content if that is the currently used singleton content.
function LazySingleton() {
  const [source, target] = useSingleton();
  const [mountedRef, setMountedRef] = useState(null);
  const ref1 = useRef();
  const ref2 = useRef();

  return (
    <>
      <Tippy
        onTrigger={(_, event) => setMountedRef(event.currentTarget)}
        onHidden={() => setMountedRef(null)}
        singleton={source}
      />

      <Tippy
        content={mountedRef === ref1.current ? <ExpensiveComponent /> : ''}
        singleton={target}
      >
        <button ref={ref1}>Hello</button>
      </Tippy>
      <Tippy
        content={mountedRef === ref2.current ? <ExpensiveComponent /> : ''}
        singleton={target}
      >
        <button ref={ref2}>Hello</button>
      </Tippy>
    </>
  );
}

About LazySingleton.jsx,
won't it mount all linked singletons' content when a single one gets triggered?

Here a TypeScript-enabled version of the code above (tested with TypeScript 3.8.3):

// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.
// Replace <Tippy /> with <LazyTippy /> component and it should work the same.

import React from 'react';

import Tippy, { TippyProps } from '@tippyjs/react';

// Export own set of props (even if they are the same for now) to enable clients to be more future-proof
export type LazyTippyProps = TippyProps;

export const LazyTippy = (props: LazyTippyProps) => {
  const [mounted, setMounted] = React.useState(false);

  const lazyPlugin = {
    fn: () => ({
      onMount: () => setMounted(true),
      onHidden: () => setMounted(false),
    }),
  };

  const computedProps = { ...props };

  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])];

  if (props.render) {
    const render = props.render; // let TypeScript safely derive that render is not undefined
    computedProps.render = (...args) => (mounted ? render(...args) : '');
  } else {
    computedProps.content = mounted ? props.content : '';
  }

  return <Tippy {...computedProps} />;
};

Added a fully lazy singleton example

@atomiks Would you mind adding a TS version of your fully lazy example? I tried for awhile, but couldn't get the ref right.

@christopher-caldwell

import Tippy, { useSingleton } from "@tippyjs/react";
import React, { useRef, useState } from "react";

function LazySingleton() {
  const [source, target] = useSingleton();
  const [mountedRef, setMountedRef] = useState<EventTarget | null>(null);
  const ref1 = useRef<HTMLButtonElement | null>(null); // set these to the type of your tippy contents.
  const ref2 = useRef<HTMLButtonElement | null>(null);
  return (
    <>
      <Tippy
        onTrigger={(_, event) => setMountedRef(event.currentTarget)}
        onHidden={() => setMountedRef(null)}
        singleton={source}
      />
      <Tippy
        content={mountedRef === ref1.current ? <ExpensiveComponent /> : ""}
        singleton={target}
      >
        <button ref={ref1}>Hello</button>
      </Tippy>
      <Tippy
        content={mountedRef === ref2.current ? <ExpensiveComponent /> : ""}
        singleton={target}
      >
        <button ref={ref2}>Hello</button>
      </Tippy>
    </>
  );
}

I created a codesandbox for LazyTippy if you want to give it a whirl: https://codesandbox.io/s/mystifying-monad-vul34

Some things of note:

• moveTransition doesn't work as expected with LazyTippy (you can see this in my sandbox) so I'm going to have to remove usage of this for now on our platform.
• You may run into some testing issues (I'm using react testing library so I can only comment on that framework):
  • You may now see an act error:
  • You also may not see the necessary content you expect to be rendered.
  • For my purposes using waitFor now fixed both of these issues: await waitFor(() => expect(screen.getByText('popover content')).toBeTruthy());

Instead of onMount to set the mounted state to true, you could try onShow in the Lazy example for the moveTransition.

Using LazyTippy, I'm getting the following warning in my testing suite:

%chide() was called on a destroyed instance. This is a no-op but indicates a potential memory leak.

It won't happen running a single test, and even if I delete the one it breaks on, it'll just break on another.

Update: we unfortunately have to back out of using Tippy as our test suite doesn't allow warnings and I'm afraid we wouldn't be able to figure this out on our own.

<LazyTippy><LazyTippy><div>Test</div></LazyTippy></LazyTippy>

^--- Nesting multiple lazy tippies gives the error "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

Any ideas on how to make nesting work?

@wahlstedt you need to forwardRef() https://github.com/atomiks/tippyjs-react/blob/master/src/forwardRef.js

Updated the example.

Can some add a lazy headless singleton example?
Thanks