make resize handle accept ref

[rortan134]

Currently the resize handle doesn't accept a ref and a quick look at the code tells me it's because it's already being used internally.

I want to be able to forward a ref to the handle element and a quick solution to this is to compose the refs with something like this hook used by the radix team.

e.g.:

- export function PanelResizeHandle({
+ export const PanelResizeHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div"> & PanelResizeHandleProps>({
  // props...
  ...rest,
- }: PanelResizeHandleProps) {
+ }, forwardedRef) => {
const divElementRef = useRef<HTMLDivElement>(null);
+ const internalRef = useComposedRefs(divElementRef, forwardedRef)

// ...

 return createElement(Type, {
    ...rest,
    // ...
- ref: divElementRef,
+ ref: internalRef,

Not sure how the other components do it but I guess any method works

[bvaughn]

I want to be able to forward a ref to the handle element

I don’t want to add a ref-forward to this component because there is no API to it. The other components, the ones that have refs, only have them because of their APIs.

If you need to get a ref to the underlying DOM element, I suggest you read it in an effect (and store it in your own ref). All the resize handle does is render a single div (with a data attribute that you can use to query it).

Each of these components have data attributes to make them accessible via query selectors. That’s how I interact with them internally as well.

Let me know if you have any questions or if this doesn't make sense.

---

❤️ → ☕ givebrian.coffee

[rortan134]

Each of these components have data attributes to make them accessible via query selectors. That’s how I interact with them internally as well.

Oh alright, thanks. Though... I'm confused as to why having an API is a requirement to provide access to the underlying element? Do you see any disadvantage in making it available to the user?

[bvaughn]

It’s about consistency. Panel and PanelGroup components supports refs, but not as pass throughs to the DOM elements they render. Rather, their refs expose custom APIs (like a resize method).

You’re asking for a pass through to the underlying DOM element, which I could add, but then the resize handle component would be different/inconsistent with those other components.

The most consistent way to interact with the underlying DOM elements in this library is using the data attributes (in an effect).

---

❤️ → ☕ givebrian.coffee

[rortan134]

That makes sense, thanks for the awesome library ❤️