Robin Malfait
fdd2629795
* use esbuild for React instead of tsdx * remove tsdx from Vue * use consistent names * add jest and prettier * update scripts * ignore some folders for prettier * run lint script instead of tsdx lint * run prettier en-masse This has a few changes because of the new prettier version. * bump typescript to latest version * make typescript happy * cleanup playground package.json * make esbuild a dev dependency * make scripts consistent * fix husky hooks * add dedicated watch script * add `yarn playground-react` and `yarn react-playground` (alias) This will make sure to run a watcher for the actual @headlessui/react package, and start a development server in the playground-react package. * ignore formatting in the .next folder * run prettier on playground-react package * setup playground-vue Still not 100% working, but getting there! * add playground aliases in @headlessui/vue and @headlessui/react This allows you to run `yarn react playground` or `yarn vue playground` from the root. * add `clean` script * move examples folder in playground-vue to root * ensure new lines for consistency in scripts * fix typescript issue * fix typescript issues in playgrounds * make sure to run prettier on everything it can * run prettier on all files * improve error output If you minify the code, then it could happen that the errors are a bit obscure. This will hardcode the component name to improve errors. * add the `prettier-plugin-tailwindcss` plugin, party! * update changelog
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { RefCallback, useRef, useCallback, useMemo } from 'react'
|
|
import { createPopper, Options } from '@popperjs/core'
|
|
|
|
/**
|
|
* Example implementation to use Popper: https://popper.js.org/
|
|
*/
|
|
export function usePopper(
|
|
options?: Partial<Options>
|
|
): [RefCallback<Element | null>, RefCallback<HTMLElement | null>] {
|
|
let reference = useRef<Element>(null)
|
|
let popper = useRef<HTMLElement>(null)
|
|
|
|
let cleanupCallback = useRef(() => {})
|
|
|
|
let instantiatePopper = useCallback(() => {
|
|
if (!reference.current) return
|
|
if (!popper.current) return
|
|
|
|
if (cleanupCallback.current) cleanupCallback.current()
|
|
|
|
cleanupCallback.current = createPopper(reference.current, popper.current, options).destroy
|
|
}, [reference, popper, cleanupCallback, options])
|
|
|
|
return useMemo(
|
|
() => [
|
|
(referenceDomNode) => {
|
|
reference.current = referenceDomNode
|
|
instantiatePopper()
|
|
},
|
|
(popperDomNode) => {
|
|
popper.current = popperDomNode
|
|
instantiatePopper()
|
|
},
|
|
],
|
|
[reference, popper, instantiatePopper]
|
|
)
|
|
}
|