Resize Handle - Custom component for ResizeHandle

I am trying to customize ResizeHandle icon for my widget using “resizeHandle” props

<ReactGridLayout
        layout={layout}
        cols={12}
        rowHeight={20}
        width={1360}
        onLayoutChange={onLayoutChange}
        resizeHandle={<ResizeHandleIcon />}
      >
      ```
![image](https://user-images.githubusercontent.com/45810749/117137202-fb872500-adc6-11eb-95f9-431c59be482e.png)

Problem:
* Custom icon displayed in the widget but resize event is not triggered. How Resize event logic handled for custom component?
* Do align SouthEast direction do I need to add css styles for custom component will it not taken care as part of resizeHandles array props?
* Will this custom resizeHandle props not available for ResponsiveGridLayout?

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:13

Top GitHub Comments

2reactions

alon24commented, Sep 29, 2021

I do this

const MyHandle = React.forwardRef<HTMLInputElement, { handleAxis?: string }>((props, ref) => {
        const { handleAxis, ...restProps } = props;
        return (
            < div (whatever...)
                ref={ref}
                className={`resizeHandle handle-${handleAxis}`}
                {...restProps}
            />
        );
    });

 <ReactGridLayout
                    // autoSize={true}
                    onLayoutChange={onLayoutChange}
                    // onBreakpointChange={onBreakpointChange}
                    className="layout"
                    breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 100 }}
                    cols={{ lg: 4, md: 4, sm: 4, xs: 4, xxs: 4 }}
                    rowHeight={359}
                    resizeHandle={<MyHandle />}
                    draggableCancel={".grid-no-drag"}
                    compactType={"horizontal"}
                    isBounded={true}
                >

2reactions

MarvinAmador7commented, May 24, 2021

I’ve been playing around with the resizeHandle prop but no luck so far, I’ve been able to render the component but when I try to resize it the whole child component is dragged but not resized.

import * as React from 'react'
import { FiArrowDownRight } from 'react-icons/fi'
import { forwardRef, Box } from '@chakra-ui/react'

export const ResizableHandler = forwardRef((props, ref) => {
  return (
    <Box
      ref={ref}
      position="absolute"
      bottom={0}
      right={0}
      width="24px"
      height="24px"
      {...props}
    >
      <FiArrowDownRight color="white" size="24" />
    </Box>
  )
})

<GridLayout
      layout={defaultLayout}
      cols={12}
      rowHeight={30}
      width={1200}
      resizeHandle={<ResizableHandler />}
    >
      <SimpleContainer>
    </GridLayout>