Word Cloud React ·
A library of to show React cohort graph
Installation
Run the following command:
npm start
How to use:
Install Package
npm i word-cloud-react --save
import in your react component:
import { WordCloud } from "word-cloud-react";
Use it as:
<WordCloud width={"auto"} data={ [{"value":1811,"word":"hey"},{"value":486,"word":"service"},{"value":433,"word":"recipe"},{"value":390,"word":"feature"},{"value":280,"word":"item"},{"value":277,"word":"type"}] } color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]}/>
Props:
width: auto | number , PropType: String | Integer
data: [{"value": 100, "word": "hi},{"value": 150, "word": "hello}] , PropType: Array
color: ['#71803F', '#F8AC1D'] , PropType: Array
clickEvent={(x)=>console.log(x.word)}
Color Schemes:
color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]
Please visit: https://coolors.co
to generate your color theme for word cloud. More you add color to the array more different color will appear randomly