Yoctol / react-d3-cloud

A word cloud react component built with d3-cloud.
https://yoctol.github.io/react-d3-cloud
MIT License
141 stars 47 forks source link

Static width/height #143

Open antunespedro80 opened 2 years ago

antunespedro80 commented 2 years ago

Hello ! Is it possible to pass width/height as string to make div fix to parent and not with a static width/height ?

robsilva commented 9 months ago

This is how I solved this:

import { useMeasure } from "react-use";
...
  const [ready, setReady]  = useState(false);
   const [ref, { width, height }] = useMeasure();
...
  useEffect(()=>{
    if(width && height) setReady(true);
  },[width, height]);

Then use the ref in the DIV

<div className="parentdiv"  ref={ref}>
   {ready && 
          <WordCloud
            data={keywords}
            width={width}
            height={height}
            font="sans-serif"
            rotate={() => (Math.random() > 0.3 ? 0 : 90)}
            padding={5}
            fill={() => (Math.random() > 0.5 ? "#000" : "#fff")}
            fontWeight="bold"
          />
          }
</div>