ijzerenhein / react-tag-cloud

Create beautiful tag/word clouds using React ☁️

THIS REPOSITORY IS NO LONGER MAINTAINED

Looking for an alternative? Please have a look at react-tagcloud.

If you are interested in maintaining this repository (and taking ownership of it), please reach out to me here.

react-tag-cloud ☁️

Create beautiful tag/word clouds using React. Uses the wonderful d3-cloud under the hood.

View live demo here (edit code)

Installation

npm install react-tag-cloud
or
yarn add react-tag-cloud

Usage

import TagCloud from 'react-tag-cloud';
import randomColor from 'randomcolor';

class MyCloud extends Component {
  render() {
    return (
      <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>
    );
  }
}

Documentation

<TagCloud> props:

name	description	type	default
style.fontSize	Font size needed for calculating layout	Function/Number	20
style.fontFamily	Font family needed for calculating layout	Function/String	serif
style.fontWeight	Font weight needed for calculating layout	Function/Number	normal
style.fontStyle	Font style needed for calculating layout	Function/String	normal
style.padding	Padding between tags (px)	Function/Number	1
style.color	Color to be used by tags	Function/String	(none)
rotate	Rotation in degrees	Function/Number	0
spiral	Spiral	Function/String	archimedean
random	Randomizer function	Function	Math.random

Any component can be used as a child component. TagCloud scans the child components for the following props for its layout calculation:

name	description	type	default
style.fontSize	Font size needed for calculating layout	Function/Number	20
style.fontFamily	Font family needed for calculating layout	Function/String	serif
style.fontWeight	Font weight needed for calculating layout	Function/Number	normal
style.fontStyle	Font style needed for calculating layout	Function/String	normal
style.padding	Padding between tags (px)	Function/Number	1
style.color	Color to be used by tag	Function/String	(none)
rotate	Rotation in degrees	Function/Number	0

Examples

• (Playground on StackBlitz) (source)
• ijzerenhein.nl

Resources

• https://github.com/jasondavies/d3-cloud
• https://en.wikipedia.org/wiki/Tag_cloud

License

MIT

Cool?

Do you think this cool and useful? Consider buying me a coffee!

react-tag-cloud's Issues

Build contain ES6 formatting

TagCloud file code directly moved to the dist folder that contains the ES6 code
Because of this when I try to run the custom webpack for generating the build it will use UglifyJsPlugin to generate the build and UglifyJS will not convert ES6 to ES5 and build fails with error

One solution is that in the dist folder convert the ES6 code into ES5 of the TagCloude.js file and then run the minify build for that I have to fork the repo
It is possible to create a build in pure JS or in ES5 code

Excessively long words gets omitted

If the width of the word exceeds the width of TagCloud boundary, the word will not be rendered

After changing page by route, warning appears when countdown time is up.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Set default width and height on TagCloud

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.

Could not find a declaration file for module 'react-tag-cloud'

Hi!
I'm trying to use the component in my project with create-react-app. When I install the dependency vs code shows me:

Could not find a declaration file for module 'react-tag-cloud'. '~/node_modules/react-tag-cloud/dist/TagCloud.js' implicitly has an 'any' type.
Try npm install @types/react-tag-cloud if it exists or add a new declaration (.d.ts) file containing `declare module 'react-tag-cloud'

React doesn't show me an error but the component is not rendered at all.

What can I do?
What is a .d.ts file?

div with nested img

Hi,

I was trying to create an image react-tag-cloud. Inside every div I put a png with img tag but I faced two kind of problems:

1. I can't manage the size of the images, both from div or img tag.

2. The cloud with img overlaps every single div.

Is possible to have this new feature ?

Tagcloud is empty

I have a list of word and I am generating divs inside the Tagcloud tag. The problem is that there are no elements in the dom listed.

const styles = {
        small: {
            fontSize: 15,
            opacity: 0.8,
        },
        medium: {
            fontSize: 18,
            opacity: 0.9,
        },
        big: {
            fontSize: 22,
            opacity: 1,
        }
    }

    const tagCloudWords = [
        { text: "Wiesbaden", size: "medium" },
        { text: "Mainz", size: "small" },
        { text: "Video", size: "big" }
    ]

<TagCloud 
            className='tag-cloud'
            style={{
              fontFamily: 'sans-serif',
              fontSize: 30,
              padding: 5,
            }}>
            {tagCloudWords.map((w,index) => {
                return (
                    <div style={styles[w.size]} key={index}>
                        {w.text}
                    </div>
                )
            })}
            
          </TagCloud>

Sometimes the words overlap each other

Is there a way to fix this? No matter what margin/padding I set for the div, it doesn't adjust the space and words still overlap.

Warnings. when using tag-cloud

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in div
in Unknown (created by Measure)
in Measure (created by TagCloud)
in TagCloud (at WordTags.js:36)

Overlapping word cloud

I have used your library to produce word cloud. When I use rotation function to rotate words I got overlapping. How to resolve it? Do I need to modify the CSS file?

Please document the "spiral" prop

Not working with React 17.0.0

with React 17.0.0
Any suggestions? @cathal-killeen @IjzerenHein @engmagdy87

Bug: overlapping words

Hey there! 👋

Sometimes I experience overlapping words like in this picture:

Is there anything I can do to avoid overlapping words?

The code from the screenshot: (https://stackblitz.com/edit/react-tag-cloud-dqfvdv?file=App.js)

<TagCloud
        style={{
          fontFamily: 'sans-serif',
          color: 'blue',
          width: '100%',
          height: '400px',
        }}
>
        <div style={{fontSize: 20}}>easy</div>
        <div style={{fontSize: 20}}>income</div>
        <div style={{fontSize: 20}}>platform</div>
        <div style={{fontSize: 20}}>streamers</div>
        <div style={{fontSize: 20}}>asd</div>
        <div style={{fontSize: 70}}>money</div>
        <div style={{fontSize: 20}}>communication</div>
        <div style={{fontSize: 20}}>audience</div>
        <div style={{fontSize: 20}}>nice</div>
        <div style={{fontSize: 20}}>logos</div>
        <div style={{fontSize: 20}}>twitch</div>
        <div style={{fontSize: 20}}>stream</div>
</TagCloud>

Thanks in advance!

behaves differently from the demo

Hi,

I have just integrated this with my project with material-ui, however when I was trying to recreate the demo it behaves differently on my browser. The words are not cut-off when it's too so it's overflowing out of the container and also it appears that the words are just positioning randomly and sometimes with a lot of overlapping despite there is a lot of remaining space in the container.

Any idea why is this happening?

Thanks

Didn't get any animation after `this.forceUpdate()`

I'm following the example to create a tag cloud, but I cannot see any animation after this.forceUpdate(), the word tags just switch positions in a flash. I'm using react 16.4.1.

Import tags from another component?

Awesome job mr. @IjzerenHein ❤️

Would it be possible to place my tags in a different component (like e.g. TagCloudTags as used in the example below)?

Thus far the tags do appear on-screen but as a flat-list. Trying to integrate it into Gatsby.

Sample code

TagCloud component

import React from "react"
import TagCloud from "react-tag-cloud"
import randomColor from "randomcolor"
import TagCloudTags from "./TagCloudTags"
import "./TagCloud.css"

class TagCloudContainer extends React.Component {
  componentDidMount() {
    setInterval(() => {
      this.forceUpdate()
    }, 3000)
  }
  render() {
    return (
      <div className="app-outer">
        <div className="app-inner">
          <TagCloud
            className="tag-cloud"
            style={{
              fontFamily: "sans-serif",
              //fontSize: () => Math.round(Math.random() * 50) + 16,
              fontSize: 30,
              color: () =>
                randomColor({
                  hue: "blue",
                }),
              padding: 5,
            }}
          >
            <TagCloudTags />
          </TagCloud>
        </div>
      </div>
    )
  }
}

export default TagCloudContainer

TagCloudTags component

import React from "react"

export default props => {
  return (
    <React.Fragment>
      <div>Very</div>
      <div>Nice</div>
      <div>Tag</div>
      <div>Cloud</div>
    </React.Fragment>
  )
}

Something is wrong when children is rendered dynamically

I am facing a problem where i have to render children dynamically after getting new data it shows previous data.
Example - I have 5 children right now

A

B

C

D

E

Now the children data is changed having only one child

F

due to some reason it is still showing any random children from previous children

Simply not working.

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.

Not working fine when having nesting childs

For any reason, it's not working fine at version 1.1.3 when you have nested childs like this for example:

<TagCloud
    {here props}
>
  <div>
    <div>
      something
    </div>
  </div>
</TagCloud>

When you do that, you received a fixed style props width of 192px for every parent div, so if you have small words, it doesn't look good because it has too much space between words and doesn't even look like a word cloud, it looks like disorder words.

react-tag-cloud dependency missing in example

The actual react-tag-cloud dependency needs to be installed manually when trying to run the example project. Can you add it in package.json / yarn.lock? :)

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

On componentWillUnmount maybe you should unmount setState calling ?

Possible to prevent words from being cut from the cloud?

I've noticed that if a word/phrase in the cloud is either too long or has too large a font for the word cloud container, it is not displayed. Is there a way to prevent this?