fix: transform className prop into a plugin

closes #204

Author: atomiks

src/Tippy.js

@@ -6,15 +6,14 @@ import {
   ssrSafeCreateDiv,
   toDataAttributes,
   deepPreserveProps,
-  updateClassName,
 } from './utils';
 import {useMutableBox, useIsomorphicLayoutEffect} from './util-hooks';
+import {classNamePlugin} from './className-plugin';
 
 export default function TippyGenerator(tippy) {
   function Tippy({
     children,
     content,
-    className,
     visible,
     singleton,
     render,
@@ -96,10 +95,10 @@ export default function TippyGenerator(tippy) {
 
     // CREATE
     useIsomorphicLayoutEffect(() => {
-      const instance = tippy(
-        mutableBox.ref || ssrSafeCreateDiv(),
-        computedProps,
-      );
+      const instance = tippy(mutableBox.ref || ssrSafeCreateDiv(), {
+        ...computedProps,
+        plugins: [classNamePlugin, ...(props.plugins || [])],
+      });
 
       mutableBox.instance = instance;
 
@@ -116,7 +115,6 @@ export default function TippyGenerator(tippy) {
           instance,
           content,
           props: computedProps,
-          className,
         });
       }
 
@@ -159,7 +157,6 @@ export default function TippyGenerator(tippy) {
           instance,
           content,
           props,
-          className,
         });
       }
     });
@@ -206,32 +203,6 @@ export default function TippyGenerator(tippy) {
       });
     }, [attrs.placement, attrs.referenceHidden, attrs.escaped, ...deps]);
 
-    useIsomorphicLayoutEffect(() => {
-      if (className) {
-        if (render) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              [
-                '@tippyjs/react: Cannot use `className` prop in conjunction',
-                'with the `render` prop. Place the className on the element',
-                'you are rendering.',
-              ].join(' '),
-            );
-          }
-
-          return;
-        }
-
-        const box = mutableBox.instance.popper.firstElementChild;
-
-        updateClassName(box, 'add', className);
-
-        return () => {
-          updateClassName(box, 'remove', className);
-        };
-      }
-    }, [className, ...deps]);
-
     return (
       <>
         {children

src/className-plugin.js

@@ -0,0 +1,40 @@
+import {updateClassName} from './utils';
+
+export const classNamePlugin = {
+  name: 'className',
+  defaultValue: '',
+  fn(instance) {
+    const box = instance.popper.firstElementChild;
+    const isDefaultRenderFn = () => !!instance.props.render?.$$tippy;
+
+    function add() {
+      if (instance.props.className && !isDefaultRenderFn()) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(
+            [
+              '@tippyjs/react: Cannot use `className` prop in conjunction with',
+              '`render` prop. Place the className on the element you are',
+              'rendering.',
+            ].join(' '),
+          );
+        }
+
+        return;
+      }
+
+      updateClassName(box, 'add', instance.props.className);
+    }
+
+    function remove() {
+      if (isDefaultRenderFn()) {
+        updateClassName(box, 'remove', instance.props.className);
+      }
+    }
+
+    return {
+      onCreate: add,
+      onBeforeUpdate: remove,
+      onAfterUpdate: add,
+    };
+  },
+};

src/useSingleton.js

@@ -1,5 +1,6 @@
 import {useMutableBox, useIsomorphicLayoutEffect} from './util-hooks';
-import {deepPreserveProps, updateClassName} from './utils';
+import {deepPreserveProps} from './utils';
+import {classNamePlugin} from './className-plugin';
 import {useMemo} from 'react';
 
 export default function useSingletonGenerator(createSingleton) {
@@ -31,6 +32,7 @@ export default function useSingletonGenerator(createSingleton) {
           ...sourceData.props,
           popperOptions: sourceData.instance.props.popperOptions,
           overrides,
+          plugins: [classNamePlugin, ...(sourceData.props.plugins || [])],
         },
       );
 
@@ -77,34 +79,6 @@ export default function useSingletonGenerator(createSingleton) {
       }
     });
 
-    useIsomorphicLayoutEffect(() => {
-      const className = mutableBox.sourceData?.className;
-
-      if (className) {
-        if (mutableBox.sourceData?.props.render) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              [
-                '@tippyjs/react: Cannot use `className` prop in conjunction',
-                'with the `render` prop. Place the className on the element',
-                'you are rendering.',
-              ].join(' '),
-            );
-          }
-
-          return;
-        }
-
-        const box = mutableBox.instance.popper.firstElementChild;
-
-        updateClassName(box, 'add', className);
-
-        return () => {
-          updateClassName(box, 'remove', className);
-        };
-      }
-    });
-
     return useMemo(() => {
       const source = {
         data: mutableBox,

test/Tippy.test.js

@@ -485,9 +485,9 @@ describe('<Tippy />', () => {
 
     expect(spy).toHaveBeenCalledWith(
       [
-        '@tippyjs/react: Cannot use `className` prop in conjunction',
-        'with the `render` prop. Place the className on the element',
-        'you are rendering.',
+        '@tippyjs/react: Cannot use `className` prop in conjunction with',
+        '`render` prop. Place the className on the element you are',
+        'rendering.',
       ].join(' '),
     );
 

test/__snapshots__/Tippy.test.js.snap

@@ -2,6 +2,11 @@
 
 exports[`<Tippy /> props.plugins 1`] = `
 Array [
+  Object {
+    "defaultValue": "",
+    "fn": [Function],
+    "name": "className",
+  },
   Object {
     "fn": [Function],
   },