My motivation for wanting a way to reference the underlying HTML elements of the Dropdown components is to enhance the scrolling functionality of my DropdownMenu implementation.
I have added arrow buttons to the top and bottom of my DropdownMenu that appear when there is hidden content in those directions. When clicked, I want these buttons to cause the the DropdownMenu to scroll in that direction by a certain amount.
I have the behaviour working using ReactDOM.findDOMNode but I would like to use a callback ref instead (coming from the discussion in this issue).
I believe a simple solution is for the DropdownMenu component to accept an onRef prop that forwards to the Component (seen below), something like ref={this.props.onRef} underneath style={style}:
|
<Component |
|
{...props} |
|
role="menu" |
|
className={cx(className, { |
|
[styles.dropdownMenu]: true, |
|
[styles.selected]: activeMenuItems.length > 0, |
|
[styles.pullRight]: !!pullRight |
|
})} |
|
style={style} |
|
> |
Are you open to something like this?
My motivation for wanting a way to reference the underlying HTML elements of the
Dropdowncomponents is to enhance the scrolling functionality of myDropdownMenuimplementation.I have added arrow buttons to the top and bottom of my
DropdownMenuthat appear when there is hidden content in those directions. When clicked, I want these buttons to cause the theDropdownMenuto scroll in that direction by a certain amount.I have the behaviour working using
ReactDOM.findDOMNodebut I would like to use a callback ref instead (coming from the discussion in this issue).I believe a simple solution is for the
DropdownMenucomponent to accept anonRefprop that forwards to theComponent(seen below), something likeref={this.props.onRef}underneathstyle={style}:react-dropdown/src/DropdownMenu.jsx
Lines 113 to 122 in abede6c
Are you open to something like this?