☁️ 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 [email protected]: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.