Words add textStyle options

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

$3

Yarn

`
yarn add react-wordcloud-words-style

`

Use

`javascript

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,
}

`

---

☁️ react-wordcloud

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

!image

Install

`sh
npm install react-wordcloud
`

Note that react-wordcloud requires react^16.13.0 as a peer dependency.

Use

$3

`js
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 ;
}
`

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.

$3

An example showing various features (callbacks, options, size).

`js
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 (
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:

`sh
git clone git@github.com:chrisrzhou/react-wordcloud

cd react-wordcloud
npm install && npm run docs
`

$3

![Edit react-wordcloud-simple](https://codesandbox.io/s/bgov9)

$3

![Edit react-wordcloud-simple](https://codesandbox.io/s/55sb8)

$3

![Edit react-wordcloud-interactive](https://codesandbox.io/s/fnk8w)

$3

![Edit react-wordcloud-interactive](https://codesandbox.io/s/4lecp)

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.