Simply not working.

[DeadcatDev]

I've recreated example with simple webpack project, just not working, no bugs or errors on console. My code:

import React, {Component} from 'react';
import TagCloud from 'react-tag-cloud';
import randomColor from 'randomcolor';

export default class App extends Component {
  render() {
    return <div>
         <TagCloud
          style={{
            fontFamily: 'sans-serif',
            fontSize: 30,
            fontWeight: 'bold',
            fontStyle: 'italic',
            color: () => randomColor(),
            padding: 5,
            width: '100%',
            height: '100%'
          }}>
          <div style={{fontSize: 50}}>react</div>
          <div style={{color: 'green'}}>tag</div>
          <div rotate={90}>cloud</div>
        </TagCloud>
    </div>
  }
}

Just nothing shows up.

[DeadcatDev]

Ok, the ALL issues are because there is lack of:

The component can't get height / width of elements and not render bounduaries without it. This is added in all live examples but not to the demos.

[IjzerenHein]

Ah thanks for letting me know. 👍 I will re-test the examples and make sure they all work out of the box.

[trm313]

I'm having what seems like the same issue, but I haven't been able to fix it in the same way.

No errors in console, or compiler (using CRA). Just getting a div without its dimensions properly defined (height 0). Any ideas on what I could be missing? react-tag-cloud v1.1.2

Here's what I've got down:

/*** CSS File ***/
.app-outer {
    align-items: center; 
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    padding: 20px 0;
    position: absolute;
    right: 0;
    top: 0;
}
.app-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1000px;
    width: 100%;
}
.tag-cloud {
    flex: 1;
}

Component render:

render() {
        return (
            <div className="app-outer">
                <div className="app-inner">
                    <TagCloud
                        className="tag-cloud"
                        style={{
                            fontFamily: 'sans-serif',
                            color: '#000',
                            fontSize: 14,
                            padding: 5,
                            width: '100%',
                            height: '100%',
                            flex: 1
                        }}>
                        <div>Test</div>
                        <div>Testing</div>
                    </TagCloud>
                </div>
            </div>
        )
    }

DOM:

[IjzerenHein]

@trm313 react-tag-cloud doesn't have an intrinsic size of its own. Which means that it inherits the size from its parent. Looking at your DOM code, Make sure that app-inner, app-outer, card-body, etc.. all a size configured.