madox2 / react-tagcloud Goto Github PK

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.

Currently this package has react ^15.5.0 as a peerDependency.

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

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

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.

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}
            ]
        }

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.

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.

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?

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

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!

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

Probably similar to #30?

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

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?

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+

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

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!

I really need a props parameter that allowed the internal mixing mechanism to be disabled.

Like this:

<TagCloud disableAutoShuffle={true} ...props />

I think this is a very important tweak, especially when you want to sort the items in the cloud in your own way and it's important to keep the order passed on

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.