Closed anilanar closed 2 years ago
I'm having the same problem than you. I did solve this issues with the npm package react-merge-refs But I use ToggleLayer instead of useToggleLayer.
targetRef = useRef()
({ triggerRef, toggle, close, isOpen }) => (
<div ref={mergeRefs([triggerRef, targetRef])>{children}</div>
)
It's an hack solution but it should have work fine for your need.
I'm trying to push the feature even further by removing div need to hold the triggerRef sending it to the child. MergeRefs isn't doing well in this scenario, so I will try to make few edit and allow ref to be given from outside. I think it's too late for you now, but I might reference this issue later on.
Our codebase @Userlike has a very similar menu solution, so we had plans to reuse
react-laag
and potentially contribute with bug fixes.Now I gave it a try to replace our menu/dropdown/tooltips with
react-laag
, but sadly it didn't work out.Our "Dropdown" component takes the
triggerRef
from outside (because we have a few cases in whichtriggerRef
is needed by others) and it can be both controlled and uncontrolled.useToggleLayer
looks pretty good for our use cases, but it lacks a controlled mode.Our Dropdown component has the following prop:
It's optional. If it's not passed,
Dropdown
is uncontrolled. Otherwise it's controlled.Actually, let me give the full picture:
Dropdown
manages positioning the layer, closing on outside clicks etc. And we have another component that reusesDropdown
to attach key binds and hovers to make an accessible dropdown menu. We've noticed thatDropdown
has the best chance of reuse if layerRef, triggerRef and open state can be passed from outside.Dropdown's behaviour is encoded inside a
useDropdown
hook, so other hooks can reuse dropdown's logic.Sorry for my lengthy/unstructured writing.