react-chartjs-2响应式热刷新（饼图）

Question

I'm currently working on a pie chart for which I want to change the layout depending on the size of the window (namely change the position of the legend from left to bottom).

function PieChart() {
    const { width } = useWindowSize();

    return (
        <React.Fragment>
            <Pie
                data={data}
                width={width < size.smallDevices ? 100 : "auto"}
                legend={width < size.smallDevices ? legendOptsSmall : legendOptsLarge}
            />
            <div>{width < size.smallDevices ? "Small devices" : "Big devices"}</div>
        </React.Fragment>
    );
}

In this example, where width returns the width of the window, the div correctly changes from "Small devices" to "Big devices" while I resize the window, but the Pie from react-chartjs-2 doesn't change. However, when refreshed, the Pie correctly loads with the right layout (for small devices or big devices, depending on the situation). Only the hot refresh is failing.

Any idea on how to get a hot refresh?

Thanks!

Answer 1

I agree with Cozzani You should set width/height in your state then add width/height on addEventListener() for resizing and mean while you should update your state then component will re-render, when component re-render your width/height will be updated. You can have a look on example gist