react-wordcloud

☁️ react-wordcloud

Simple React + D3 wordcloud component with powerful features. Uses the d3-cloud layout.

Install

npm install react-wordcloud

Note that react-wordcloud requires react^16.13.0 as a peer dependency.

Use

Simple

import React from 'react';
import ReactWordcloud from 'react-wordcloud';

const words = [
  {
    text: 'told',
    value: 64,
  },
  {
    text: 'mistake',
    value: 11,
  },
  {
    text: 'thought',
    value: 16,
  },
  {
    text: 'bad',
    value: 17,
  },
]

function SimpleWordcloud() {
  return <ReactWordcloud words={words} />
}

Kitchen Sink

An example showing various features (callbacks, options, size).

const callbacks = {
  getWordColor: word => word.value > 50 ? "blue" : "red",
  onWordClick: console.log,
  onWordMouseOver: console.log,
  getWordTooltip: word => `${word.text} (${word.value}) [${word.value > 50 ? "good" : "bad"}]`,
}
const options = {
  rotations: 2,
  rotationAngles: [-90, 0],
};
const size = [600, 400];
const words = [...];

function MyWordcloud() {
  return (
    <ReactWordcloud
      callbacks={callbacks}
      options={options}
      size={size}
      words={words}
    />
  );
}

Examples

View all documented examples and gallery of react-wordcloud applications at https://react-wordcloud.netlify.com/.

You can also run the examples locally:

git clone [e-mail]:chrisrzhou/react-wordcloud

cd react-wordcloud
npm install && npm run docs

No props

Responsive

Configurable Options

Callbacks

Wordcloud Generator

Create wordclouds using this wordcloud generator: https://wordcloud-generator.netlify.com/

Features supported:

• Edit and Upload text inputs
• Various NLP features (stopwords, ngrams)
• Wordcloud configurations
• Export/save/share wordclouds

Contributing

The code is written in typescript, linted with xo, and built with microbundle. Examples and documentations are built with docz.

Feel free to contribute by submitting a pull request.

Changelog

1.2.7 (2020-08-07)

• Internal code cleanup (detypscriptify source code)
• Update docs, readme and other configs.

'Breaking' Changes: Tooltip CSS and Typings

Decoupled the tippy CSS from the package. This will improve future versioning of the project, and is also the recommendation set by the tippy project. Tooltips with this new versions might look off without CSS styles, but not considering this a breaking change because you can easily add the following imports to address the issue:

import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css'

Some rarely used typings are no longer exported (e.g. Enter, Spiral, WordToStringCallback, WordEventCallback, MinMaxPair, AttributeValue). While this is a breaking change, taking the liberty to assume this as non-breaking in an effort to constrain the exposed typings for improved future versioning of the project.