Closed zebra-ok closed 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.
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.
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
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.
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.
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 settingwidth=100%
andheight=100%
on theTagCloud
element as a default value, that might save other people some debugging time.