Is it possible to pass down the triggerRef

Hi.

Is it possible to do something like this

type Props = {
  triggerRef: React.RefObject<HtmlElement>
}

funciton Tooltip(props: Props) {
  return <ToggleLayer triggerRef={props.triggerRef />
}

[everweij]

Thanks for your explanation, I’ve created two examples with CodeSandbox, hopefully they will clarify some things. I agree the docs about useToggleLayer should cover more use-cases etc… will try to work on that the next couple of days.

Example A - ToggleLayer with Downshift’s useSelect (manages focus for you): https://codesandbox.io/s/select-menu-compound-8ds5e

Example B - useToggleLayer while ‘owning’ your own ref https://codesandbox.io/s/select-menu-usetogglelayer-xphuy

Note: If you just want access to the trigger-ref, you could also expose the trigger-ref to the outside as follows:

import mergeRefs from 'react-merge-refs';

const SelectMenu = React.forwardRef(function SelectMenu(props, forwardedRef) {
  return (
    <ToggleLayer
      // usual props...
    >
      {({ triggerRef}) => <div ref={mergeRefs(triggerRef, forwardedRef)} />}
    </ToggleLayer>
  );
});

// somewhere in your app...
function App() {
  const menuRef = React.useRef();

  React.useEffect(() => { /* do stuff with the ref... */}, [])

  return (
    <SelectMenu ref={menuRef} />
  )
}

[everweij]

Awesome! Like how you made your tooltip component. Thanks for showing, and glad I could help 😃