wordcloud-react-18

Simple React + D3 wordcloud component with powerful features. Uses the d3-cloud layout. This is a fork from ☁️ react-wordcloud, with updated dependencies and React 18.

Install

npm install wordcloud-react-18

Use

Simple

import React from 'react';
import { ReactWordCloud } from 'wordcloud-react-18';

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

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

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

By default, ReactWordCloud is configured with animated tooltips enabled and requires CSS for styling. Tippy provides base styling in the resources above or you can create your own.

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 (
    <ReactWordcCloud
      callbacks={callbacks}
      options={options}
      size={size}
      words={words}
    />
  );
}