feat(usePopper): add a new hook

Author: mrholek

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -3,8 +3,9 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { createPopper, Instance, Placement } from '@popperjs/core'
+import { Placement } from '@popperjs/core'
 
+import { usePopper } from '../../hooks'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
@@ -79,47 +80,35 @@ export const CPopover: FC<CPopoverProps> = ({
 }) => {
   const popoverRef = useRef(null)
   const togglerRef = useRef(null)
-  const popper = useRef<Instance>()
+  const { initPopper, destroyPopper } = usePopper()
   const [_visible, setVisible] = useState(visible)
 
+  const popperConfig = {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: getPlacement(placement, togglerRef.current),
+  }
+
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
   useEffect(() => {
-    if (_visible) {
-      initPopper()
+    if (_visible && togglerRef.current && popoverRef.current) {
+      initPopper(togglerRef.current, popoverRef.current, popperConfig)
     }
 
     return () => {
       destroyPopper()
     }
   }, [_visible])
 
-  const initPopper = () => {
-    if (togglerRef.current && popoverRef.current) {
-      popper.current = createPopper(togglerRef.current, popoverRef.current, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: offset,
-            },
-          },
-        ],
-        placement: getPlacement(placement, togglerRef.current),
-      })
-    }
-  }
-
-  const destroyPopper = () => {
-    if (popper.current) {
-      popper.current.destroy()
-    }
-
-    popper.current = undefined
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -3,8 +3,9 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { createPopper, Instance, Placement } from '@popperjs/core'
+import { Placement } from '@popperjs/core'
 
+import { usePopper } from '../../hooks'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
@@ -74,47 +75,35 @@ export const CTooltip: FC<CTooltipProps> = ({
 }) => {
   const tooltipRef = useRef(null)
   const togglerRef = useRef(null)
-  const popper = useRef<Instance>()
+  const { initPopper, destroyPopper } = usePopper()
   const [_visible, setVisible] = useState(visible)
 
+  const popperConfig = {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: getPlacement(placement, togglerRef.current),
+  }
+
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
   useEffect(() => {
-    if (_visible) {
-      initPopper()
+    if (_visible && togglerRef.current && tooltipRef.current) {
+      initPopper(togglerRef.current, tooltipRef.current, popperConfig)
     }
 
     return () => {
       destroyPopper()
     }
   }, [_visible])
 
-  const initPopper = () => {
-    if (togglerRef.current && tooltipRef.current) {
-      popper.current = createPopper(togglerRef.current, tooltipRef.current, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: offset,
-            },
-          },
-        ],
-        placement: getPlacement(placement, togglerRef.current),
-      })
-    }
-  }
-
-  const destroyPopper = () => {
-    if (popper.current) {
-      popper.current.destroy()
-    }
-
-    popper.current = undefined
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {

packages/coreui-react/src/hooks/index.ts

@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
+import { usePopper } from './usePopper'
 
-export { useColorModes, useForkedRef }
+export { useColorModes, useForkedRef, usePopper }

packages/coreui-react/src/hooks/usePopper.ts

@@ -0,0 +1,31 @@
+import { useRef } from 'react'
+import { createPopper } from '@popperjs/core'
+import type { Instance, Options } from '@popperjs/core'
+
+interface UsePopperOutput {
+  popper: Instance | undefined
+  initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
+  destroyPopper: () => void
+}
+
+export const usePopper = (): UsePopperOutput => {
+  const _popper = useRef<Instance>()
+
+  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
+    _popper.current = createPopper(reference, popper, options)
+  }
+
+  const destroyPopper = () => {
+    if (_popper.current) {
+      _popper.current.destroy()
+    }
+
+    _popper.current = undefined
+  }
+
+  return {
+    popper: _popper.current,
+    initPopper,
+    destroyPopper,
+  }
+}