☁️ 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
;; const words = text: 'told' value: 64 text: 'mistake' value: 11 text: 'thought' value: 16 text: 'bad' value: 17 { return <ReactWordcloud words=words />}
Kitchen Sink
An example showing various features (callbacks, options, size).
const callbacks = wordvalue > 50 ? "blue" : "red" onWordClick: consolelog onWordMouseOver: consolelog ` () []`const options = rotations: 2 rotationAngles: -90 0;const size = 600 400;const words = ...; { 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-wordcloudnpm 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.