How to change the resize handle to use Custom Handle Icon

[zzr994]

I am referring to the documentation:
// Custom component for resize handles
// See handle as used in https://github.com/react-grid-layout/react-resizable#resize-handle
// Your component should have the class .react-resizable-handle, or you should add your custom
// class to the draggableCancel prop.
resizeHandle?: ReactElement | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef) => ReactElement),

The documentation is not clear on how to implement a custom resizeHandle. Can you please provide some examples on how this can be done. I am able to use the default resize handle and it works fine. But I would like to use a custom resize handle that we use in our applications.

Thanks.

[awestm]

I'm also stuck on this, as far as I can tell, there's no way to implement a custom handler in the case of more than 1 resizeHandle (se, ne, etc)

[zzr994]

Do you have any code to share/review preferably in Sandbox. We can review to see if you have followed the documentation correctly. I was looking at this a while back, It will be good to see it working. Most of the code that I reviewed from other developers were not following the docs correctly. So can not say for sure if this is API issue of implementation issue.

[awestm]

Hi zzr, thanks for the reply. Made a short example in code sandbox here:

https://codesandbox.io/p/sandbox/festive-brattain-5xlr3z

Believe I'm following the suggested pattern as of 1.5.0, and the handles themselves seem to get generated in the right spot. However when you try to interact with them you get the " not mounted on DragStart!" error. I've messed around quite a bit trying to get it to function as expected, but maybe I've overlooked something relatively simple.

If you have any suggestions or can point me to an example where multiple custom handles are used, that would be super helpful! Also I'm happy to add an example for that to the examples page if we can get it working.

Thanks!