Words add textStyle options

 {
    text: 'Chanel Foundation',
    value: 24,
    textStyle: 'font-weight:bolder;',
  }

Install:

Yarn

yarn add react-wordcloud-words-style

Use

import ReactWordcloud from 'react-wordcloud-words-style'
import { CallbacksProp, OptionsProp } from 'react-wordcloud-words-style/types/index'

const words=[
  {
    text: 'Word A',
    value: 20,
    textStyle: 'font-weight:bolder;',
  },
  {
    text: 'Word B',
    value: 9,
  }]

const options: OptionsProp = {
  colors: ['#D2B0FF', '#7367F0', '#28DAC6', '#FF9F43', '#28C76F'],
  enableTooltip: false,
  deterministic: true,
  fontFamily: 'Montserrat',
  fontSizes: [7, 24],
  fontStyle: 'normal',
  // fontWeight: 'normal',
  padding: 3,
  rotations: 0, //旋转
  rotationAngles: [0, 10],
  scale: 'sqrt',
  spiral: 'archimedean',
  transitionDuration: 1000,
}
<ReactWordcloud words={words} options={options} />

☁️ 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";

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 [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.