Robin Malfait
ef00732685
- Made the use of `const` and `let` consistent - import required functions and types from 'react' instead of using the `React.` namespace. - Added `Expand` type, which can expand complex types to their "final" result. - Ensured that we use `as const` for DEFAULT_XXX_TAG where we used a string. So that we have the type of `div` instead of `string` for example. - Used `interface` over `type` where possible. I'm personally more of a `type` fan. But the TypeScript recommends `interfaces` where possible because they are faster, yield better error messages and so on.
24 lines
610 B
JavaScript
24 lines
610 B
JavaScript
import { ref, onMounted, watchEffect } from 'vue'
|
|
import { createPopper } from '@popperjs/core'
|
|
|
|
export function usePopper(options) {
|
|
let reference = ref(null)
|
|
let popper = ref(null)
|
|
|
|
onMounted(() => {
|
|
watchEffect(onInvalidate => {
|
|
let popperEl = popper.value.el || popper.value
|
|
let referenceEl = reference.value.el || reference.value
|
|
|
|
if (!(referenceEl instanceof HTMLElement)) return
|
|
if (!(popperEl instanceof HTMLElement)) return
|
|
|
|
let { destroy } = createPopper(referenceEl, popperEl, options)
|
|
|
|
onInvalidate(destroy)
|
|
})
|
|
})
|
|
|
|
return [reference, popper]
|
|
}
|