CODEWITHSUNDEEP
reactjschartswidgetresizable
A.D
A.D

Reputation: 384

Re-sizing Google chart in react rnd

I am a newbie to react and currently developing an application,

BACKGROUND:

I am trying to use a resizeable rnd component which has Geo map chart as its content.

PROBLEM:

Even though rnd component resizes works fine, the content inside the rnd component doesn't resize.

CODE:

https://codesandbox.io/embed/15lo3mw93?fontsize=14

Any suggestions or hints would be helpful.

Thanks in advance.

Upvotes: 1

Views: 1051

Answers (1)

Roman Unt
Roman Unt

Reputation: 893

You need to update component's state when you do resize, it will trigger render and map should get proper sizes.

<Rnd
    style={style}
    default={{
      x: 0,
      y: 0,
      width: "" + this.state.mappanelwidth + "",
      height: "" + this.state.mappanelheight + ""
    }}
    onResize={(e, direction, ref, delta, position) => {
      this.setState({
        mappanelheight: ref.offsetHeight,
        mappanelwidth: ref.offsetWidth
      });
    }}
  >

Upvotes: 1

Related Questions