feat: disableStyleInjection tooltip prop

Author: gabrieljablonski

src/components/TooltipController/TooltipController.tsx

@@ -44,6 +44,7 @@ const TooltipController = ({
   style,
   position,
   isOpen,
+  disableStyleInjection = false,
   setIsOpen,
   afterShow,
   afterHide,
@@ -61,6 +62,7 @@ const TooltipController = ({
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
   const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)
+  const styleInjectionRef = useRef(disableStyleInjection)
   /**
    * @todo Remove this in a future version (provider/wrapper method is deprecated)
    */
@@ -168,11 +170,26 @@ const TooltipController = ({
     setTooltipPositionStrategy(positionStrategy)
   }, [positionStrategy])
 
+  useEffect(() => {
+    if (styleInjectionRef.current === disableStyleInjection) {
+      return
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.')
+    }
+  }, [disableStyleInjection])
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      // here we can do validations related to the props before inject the styles,
-      // we can also send something into the 'detail' to the inject style function
-      window.dispatchEvent(new CustomEvent('rt_inject_styles', { detail: {} }))
+      window.dispatchEvent(
+        new CustomEvent('react-tooltip-inject-styles', {
+          detail: {
+            disableCore: disableStyleInjection === 'core',
+            disableBase: disableStyleInjection,
+          },
+        }),
+      )
     }
   }, [])
 

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -60,6 +60,7 @@ export interface ITooltipController {
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean
+  disableStyleInjection?: boolean | 'core'
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void

src/index.tsx

@@ -21,10 +21,16 @@ const TooltipCoreStyles = 'react-tooltip-core-css-placeholder'
 const TooltipStyles = 'react-tooltip-css-placeholder'
 
 if (typeof window !== 'undefined') {
-  window.addEventListener('rt_inject_styles', () => {
-    injectStyle({ css: TooltipCoreStyles, type: 'core' })
-    injectStyle({ css: TooltipStyles })
-  })
+  window.addEventListener('react-tooltip-inject-styles', ((
+    event: CustomEvent<{ disableCore: boolean; disableBase: boolean }>,
+  ) => {
+    if (!event.detail.disableCore) {
+      injectStyle({ css: TooltipCoreStyles, type: 'core' })
+    }
+    if (!event.detail.disableBase) {
+      injectStyle({ css: TooltipStyles, type: 'base' })
+    }
+  }) as EventListener)
 }
 
 export { TooltipController as Tooltip } from './components/TooltipController'
@@ -42,5 +48,3 @@ export type {
   IPosition,
   Middleware,
 }
-
-export { removeStyle } from './utils/handle-style'

src/utils/handle-style.ts

@@ -3,6 +3,11 @@ const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles'
 // This is the ID for the visual styles of ReactTooltip
 const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles'
 
+const injected = {
+  core: false,
+  base: false,
+}
+
 function injectStyle({
   css,
   id = REACT_TOOLTIP_BASE_STYLES_ID,
@@ -11,26 +16,10 @@ function injectStyle({
 }: {
   css: string
   id?: string
-  type?: string
+  type?: 'core' | 'base'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: any
 }) {
-  if (
-    type === 'core' &&
-    typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
-    process?.env?.REACT_TOOLTIP_DISABLE_CORE_STYLES
-  ) {
-    return
-  }
-
-  if (
-    type !== 'core' &&
-    typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
-    process?.env?.REACT_TOOLTIP_DISABLE_BASE_STYLES
-  ) {
-    return
-  }
-
   if (type === 'core') {
     // eslint-disable-next-line no-param-reassign
     id = REACT_TOOLTIP_CORE_STYLES_ID
@@ -42,7 +31,18 @@ function injectStyle({
   }
   const { insertAt } = ref
 
-  if (!css || typeof document === 'undefined' || document.getElementById(id)) {
+  if (!css || typeof document === 'undefined' || injected[type]) {
+    return
+  }
+
+  if (document.getElementById(id)) {
+    // this should never happen because of `injected[type]`
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[react-tooltip] Element with id '${id}' already exists. Call \`removeStyle()\` first`,
+      )
+    }
     return
   }
 
@@ -67,22 +67,37 @@ function injectStyle({
   } else {
     style.appendChild(document.createTextNode(css))
   }
+
+  injected[type] = true
 }
 
 function removeStyle({
   type = 'base',
   id = REACT_TOOLTIP_BASE_STYLES_ID,
 }: {
-  type?: string
+  type?: 'core' | 'base'
   id?: string
 } = {}) {
+  if (!injected[type]) {
+    return
+  }
+
   if (type === 'core') {
     // eslint-disable-next-line no-param-reassign
     id = REACT_TOOLTIP_CORE_STYLES_ID
   }
 
   const style = document.getElementById(id)
-  style?.remove()
+  if (style?.tagName === 'style') {
+    style?.remove()
+  } else if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[react-tooltip] Failed to remove 'style' element with id '${id}'. Call \`injectStyle()\` first`,
+    )
+  }
+
+  injected[type] = false
 }
 
 export { injectStyle, removeStyle }