Question: How to make it render using 100% width/height of the container?

[carlosalvidrez]

How to make it render using 100% width/height of the container? Trying to figure out how to make it responsive to screen width changes for example.

PS. Thank you for sharing this library!

[chentsulin]

You can use useMeasure Custom React Hook or Resize Observer API to get width, height of the container. For example:

function App({ data }) {
  const [ref, { width, height }] = useMeasure();

  return (
    <div ref={ref} style={{ width: 500, height: 500 }}>
      <WordCloud
        width={width}
        height={height}
        data={newData}
      />
    </div>
  );
}

[chentsulin]

95 #132 I suppose viewBox can help in this case.

[chentsulin]

viewBox solves this problem perfectly. Just update to the latest version.

[kongmengfei]

viewBox solves this problem perfectly. Just update to the latest version.

how to use view box?

[carlosalvidrez]

I also have no idea what the solution using "viewBox" looks like @kongmengfei. @chentsulin could you please provide an example? Thanks