☁️ react-wordcloud-plus

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

This is a fork of react-wordcloud with React 18 and ESM support.

Install

npm install react-wordcloud-plus

Note that react-wordcloud-plus requires react^16.13.0 || ^17.0.0 || ^18.0.0 as a peer dependency.

Use

Simple

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

// Import tooltip styles
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,
  },
]

// Simple functional component
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 (
    <ReactWordcloud
      callbacks={callbacks}
      options={options}
      size={size}
      words={words}
    />
  );
}

Features

• React 18 compatible
• Modern ESM module support
• Comprehensive TypeScript definitions
• Responsive design
• Customizable options and callbacks
• Tooltips

TypeScript Support

The library includes full TypeScript definitions for all features:

import ReactWordcloud, { Word, Options, Callbacks, Props } from 'react-wordcloud-plus';

// Define your words
const words: Word[] = [
  { text: 'Hello', value: 100 },
  { text: 'World', value: 50 },
];

// Configure options with proper typing
const options: Options = {
  colors: ['#1f77b4', '#ff7f0e', '#2ca02c'],
  fontSizes: [10, 60] as [number, number], // Type assertion for MinMaxPair
  rotationAngles: [-90, 90] as [number, number], // Type assertion for MinMaxPair
  // ...more options
};

// Use in your component
const MyComponent = () => (
  <ReactWordcloud
    words={words}
    options={options}
  />
);

Examples

For examples, check out the original react-wordcloud examples.

Contributing

The code is written in JavaScript with TypeScript definitions and built with esbuild.

For more information about the recent upgrade to React 18 and ESM, see UPGRADE.md.

Feel free to contribute by submitting a pull request.

License

MIT License - see the LICENSE file for details.

Credits

This package is a fork of react-wordcloud by Chris Zhou.