☁️ React Wordcloud
Edit page
HomeReadmeInstallUseExamplesWordcloud GeneratorContributingProps
Usage
FAQChangelog

☁️ react-wordcloud

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

<img alt="image" src={require(".//public/wordcloud.png")} />

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';
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 (
<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 git@github.com:chrisrzhou/react-wordcloud
cd react-wordcloud
npm install && npm run docs

No props

<img alt="Edit react-wordcloud-simple" src="https://codesandbox.io/static/img/play-codesandbox.svg" />

Responsive

<img alt="Edit react-wordcloud-simple" src="https://codesandbox.io/static/img/play-codesandbox.svg" />

Configurable Options

<img alt="Edit react-wordcloud-interactive" src="https://codesandbox.io/static/img/play-codesandbox.svg" />

Callbacks

<img alt="Edit react-wordcloud-interactive" src="https://codesandbox.io/static/img/play-codesandbox.svg" />

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.