madox2 / react-tagcloud

Tag/word cloud component for react https://madox2.github.io/react-tagcloud/

react-tagcloud

Simple and extensible tag/word cloud React component.

See the demo.

Installation

npm install react-tagcloud

# or with yarn
yarn add react-tagcloud

# react < 16.8.0
npm install [email protected]

Basic usage

import { TagCloud } from 'react-tagcloud'

const data = [
  { value: 'JavaScript', count: 38 },
  { value: 'React', count: 30 },
  { value: 'Nodejs', count: 28 },
  { value: 'Express.js', count: 25 },
  { value: 'HTML5', count: 33 },
  { value: 'MongoDB', count: 18 },
  { value: 'CSS3', count: 20 },
]

const SimpleCloud = () => (
  <TagCloud
    minSize={12}
    maxSize={35}
    tags={data}
    onClick={tag => alert(`'${tag.value}' was selected!`)}
  />
)

React Native

In react native projects import tag cloud from the package relative path react-tagcloud/rn.

import React from 'react';

import { Alert } from 'react-native';
import { TagCloud } from 'react-tagcloud/rn'

const data = [
  // ...
]

const SimpleCloud = () => (
  <TagCloud
    minSize={12}
    maxSize={35}
    tags={data}
    onPress={tag => Alert.alert(`'${tag.value}' was selected!`)}
  />
)

API

Options

<TagCloud /> component has props listed below:

Option	Type	Required	Note
tags	Array	true	Array of objects that represent tags (see Tag object)
maxSize	Number	true	Maximal font size (in px) used in cloud
minSize	Number	true	Minimal font size (in px) used in cloud
shuffle	Boolean	false	If true, tags are shuffled. When tags are modified, cloud is re-shuffled. Default: true
colorOptions	Object	false	Random color options (see randomColor#options)
disableRandomColor	Boolean	false	If true, random color is not used
randomSeed	Number	false	Random seed used to shuffle tags and generate color
renderer	Function	false	Function used to render tag
randomNumberGenerator	Function	false	DEPRECATED, use randomSeed instead. Specifies a custom random number generator that is being used by shuffle algorithm. Default: Math.random

Note: Furthermore you can pass any other prop and it will be forwarded to the wrapping <div /> component (e.g. style, className).

Tag object

Each tag is represented by object literal having following properties:

Property	Type	Required	Note
value	String	true	String value to be displayed
count	Number	true	Represents frequency of the tag that is used to calculate tag size
key	String	false	Tag element key. If it is not provided, value property will be used instead (however it can fail if you don't have unique tag values. It is highly recommeded to use key property)
color	String	false	Represents color of the tag. If it is not provided, random color will be used instead
props	Object	false	Props to be passed to a particular tag component

Events

Event handlers can be passed to the <TagCloud /> props. Each handler has two arguments: the first is related tag object and the second is DOM event object.

Currently supported events: onClick, onDoubleClick, onMouseMove

Note: Feel free to open issue if any other event is needed.

Styles

Default class names are tag-cloud for the wrapping container, and tag-cloud-tag for a particular tag. Styles passed to <TagCloud /> props will be applied to the wrapping container.

Renderer

Rendering of tags can be fully customized by providing custom render function and passing it to the renderer prop. By default is used defaultRenderer. Render function has three arguments - tag, size and color. For example:

import { TagCloud } from 'react-tagcloud'

const customRenderer = (tag, size, color) => {
  return (
    <span key={tag.value} style={{ color }} className={`tag-${size}`}>
      {tag.value}
    </span>
  )
}

const CustomizedCloud = () => (
  <TagCloud tags={data} minSize={1} maxSize={5} renderer={customRenderer} />
)

More examples

• Simple tag cloud
• Custom color options
• Custom styles
• Custom tag props
• Custom renderer

Testing

Install dev modules:

yarn install

Run unit tests

yarn test

Run examples

cd examples
yarn install
yarn start

and open browser at http://localhost:3000

License

MIT License

react-tagcloud's Issues

Extra attributes from the server: containercomponent

version:2.3.1
the console warning: Extra attributes from the server: containercomponent when with nextjs
how to resolve this problem?

Incompatible with Internet Explorer

The method Object.assign used on TagCloud.js as part of the "const omittedProps" is incompatible with Internet Explorer according to MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

The error that I got on IE is: SCRIPT438: Object doesn't support property or method 'assign'. tag-cloud.js (33,5)

Could you please check that? Thank you!

Mouse hover event

Request - Add onMouseOver and onMouseOut events

Sample API
const onMouseOver = tag => console.log("this is value and count", tag.value, tag.count)

<TagCloud onMouseOver={onMouseOver} onMouseOut={onMouseOut} ... />

Also, I think it'd be great to offer a tooltip render option upon hover.
Thank you for the clean abstractions!

Deprecated warnings for componentWillMount and componentWillReceiveProps

Hey! componentWillMount and componentWillReceiveProps are both deprecated and are throwing console warnings upon use - https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.

NaN when min and max are same

Hi,

when tags contains only tags with same count, calculation of tag size contains division by zero https://github.com/madox2/react-tagcloud/blob/master/lib/tag-cloud.js#L37

Would be nice to return maxSize when min and max are same.

TypeError: dispatcher is null

Using react 17.0.2 and nextjs 12.0.8

I simply import tagcloud and place the tag in my html return and get>

Unhandled Runtime Error

TypeError: dispatcher is null
Call Stack
useState
../node_modules/react/cjs/react.development.js (1622:0)
TagCloud
../node_modules/react-tagcloud/lib/TagCloud.js (135:0)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js (17811:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19049:0)
callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)

I also tried to force client side rendering just in case this was the culprit:

{ process.browser && <TagCloud
                minSize={5}
                maxSize={35}
                tags={this.state.wordcloud_data}
            />    }

But unfortunately still the same error.
The line referenced in the error message is the 2nd one in this snippet:

function TagCloud(props) {
  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),

I initialize the data in the component constructor so wordcloud_data should never be null:

this.state = {
            campaign_name: "", 
            tracker: "", 
            talent_table_content: [],
            wordcloud_data: [
                {value: "test1", count: 12}, 
                {value: "test2", count: 25}, 
                {value: "test3", count: 39}, 
                {value: "test4", count: 2}, 
                {value: "test5", count: 40}
            ]
        }

Error while using in nextjs

All the classes and tags are made that can be seen in inspect element but all the spans are empty, its like it is not picking the values from data.

Is there a way to add rotation

Is there a possibility to add some sort of rotation, so it looks something like this?
https://altoona.psu.edu/sites/default/files/styles/photo_gallery_large/http/news.psu.edu/sites/default/files/success-word-cloud.jpg?itok=4_HTmhRg+

Getting warning: React does not recognize the `containerComponent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containercomponent` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I can see in the library code the use of const Container = props.containerComponent, line 102, TagCloud.js.

React warnings about that:
https://reactjs.org/warnings/unknown-prop.html

Any way to fix that warning?

Class components compatibility

Is usage supported in react class components?
I am using [email protected]

error reported in console

react.development.js:1622  Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at TagCloud (TagCloud.js:161:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)

thanks

Warning: React does not recognize the `customRenderer` prop on a DOM element.

Probably similar to #30?

Any way we can make it look like svg/canvas based word-cloud

Note: Not a functional issue. More of a style enhancement.

I like this package as its light weight and provide flexibility. For most data input, it gives decent output for word cloud but for certain type of input, output doesn't seems to look like word cloud.

Example : https://codesandbox.io/s/white-forest-h4zd4

doesn't support older Version of React internally

I am using 16.9.x version and I see this library is using 17.x.x internally resulting in failing my build

`defaultProps` console warning

Currently using v2.3.1, and I see a console error stating TagCloud: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Everything seems to be working fine, just wanted to call it out before it potentially breaks down the road.

flattenChildren(...): Encountered two children with the same key

proxyConsole.js:56 Warning: flattenChildren(...): Encountered two children with the same key, ``. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by TagCloud)

Update to support react 16

Currently this package has react ^15.5.0 as a peerDependency.

Since react 16 is out, this package should be updated to support it.

Support React Native by allow customize the default container

react-tagcloud already support custom renderer,
so we can use custom renderer to render Text in react native.
But React Native use <View> instead of <div> as the default container.

What's missing is the way to customize the default container, ex:

import { Text, View } from 'react-native'
import { TagCloud } from "react-tagcloud"

// PROPOSED one
const customContainer(props) => {
  <View>
    {props.children}
  </View>
}

const customRenderer = (tag, size, color) => {
      return (
        <Text
          key={tag.value}
          style={{
             color: 'xxx',
             fontSize: 'xxx',
          }}
        >
          {tag.value}
        </Text>
      )
    };

const data = [
  { value: "JavaScript", count: 38 },
  { value: "React", count: 30 },
  { value: "Nodejs", count: 28 },
  { value: "Express.js", count: 25 },
  { value: "HTML5", count: 33 },
  { value: "MongoDB", count: 18 },
  { value: "CSS3", count: 20 }
];

return(
  <TagCloud
    tags={data}
    renderer={customRenderer}
    // PROPOSED one
    container={customContainer}
    style={{flexDirection:'row', flexWrap:'wrap', alignItems: 'center', 
     justifyContent:'center'}}
  />
)

@madox2 how do you think?

Not showing after deployment

tagcloud doesnt appear after being deployed to netlify and vercel. can anyone help me with that?

Support for React v17

Due to the peerDependency's current value, this library can not be installed alongside React v17.

It would be cool to add support for this version of React!

Let me know if you need any help with this.