search

IjzerenHein / react-tag-cloud

Create beautiful tag/word clouds using React ☁️
https://react-tag-cloud.stackblitz.io/
MIT License
117 stars 27 forks source link

Set default width and height on TagCloud #4

Closed zebra-ok closed 6 years ago

zebra-ok commented 6 years ago

Currently, if TagCloud is placed in a container which has width and height not set explicitly, the tag cloud is not visible and its content is not inspectable in the browser tools. I suggest setting width=100% and height=100% on the TagCloud element as a default value, that might save other people some debugging time.

IjzerenHein commented 6 years ago

Hi. I have to disagree about the solution that you mentioned. Using width/height 100% is not a good universal solution. When for instance using flex-box, using width/height 100% can often bite you in ass as it doesn't work correctly on all browsers (I've experienced this many times). I strongly believe you should treat this component the same as you treat a Div, and therefore you should specify the CSS rules explicitly so that it will do exactly what you want it to do in your explicit case. So imagine you want to use flex: 2; on this component, the width/height 100% would then interfere with that.

zebra-ok commented 6 years ago

Still, setting a default width and height would definitely help, because if you just do 

<div>
  <TagCloud />
</div>

with props as documented, you don't see anything in the browser.

IjzerenHein commented 6 years ago

I still have to disagree. The example you provided doesn't work. You still need to set a style or class on the parent div, otherwise it doesn't have a width/height. The TagCloud doesn't have an intrinsic size of itself, so therefore the layouting flows inward. This means that you need to set styles/classes on all parent divs to control the size

See your own example here: https://stackblitz.com/edit/react-tag-cloud2

zebra-ok commented 6 years ago

Yeah that's what I meant :) I was just wondering if there was a possibility to set a default size for the tag cloud in the TagCloud component, so that you don't have to set a parent div.

In your example in the README there is also no parent div, so I was always wondering why nothing is displayed.

IjzerenHein commented 6 years ago

Alright, I see the problem now. I've updated the example in the readme with a width/height so that it shows that you need to explicitly set the size.