word-cloud-react

Word Cloud React ·

A library of to show Word Cloud in ReactJs

Getting Started

To install the package run command.
npm i word-cloud-react --save
or using yarn
yarn add word-cloud-react
import the packages to your react Component,
import { WordCloud } from "word-cloud-react";
Use the component as:

<WordCloud 
            width={"auto"} 
            maxFont={40} 
            minFont={10} 
            logFunc={(x)=> Math.log2(x) * 5} 
            data={[{"word":"gt feature recipe","value":275},{"word":"searchknorrproduct service feature","value":275},.......]} 
            clickEvent={(x)=>console.log(x.word)} 
            color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]}/>

Props

There are different conditional Props available in this component, they are,

Name	Type	Sample	Required	Description
width	"auto" or any integer	width={"auto"} or width={600}	true	The width of the word cloud
maxFont	integer	maxFont={40}	false , default : 40	Max Font size for font sizing algorithm for the max value
minFont	integer	minFont={10}	false , default : 10	Min Font size for font sizing algorithm for the min value
logFunc	function	logFunc={(x)=> Math.log2(x) * 5}	false , if logfunction not provided than maxFont, minFont algorithm will be used	If this props provided maxFont and minFont will not work. this will use log function to size your word the function you provide as props.
clickEvent	function	clickEvent={(x)=>console.log(x.word)}	false	get the function for click event through this props.
color	array of string hex color code	color={['#71803F', '#F8AC1D','#598EC0','#E2543E']}	true	color hex for randomise your word. more color more random it will be. user has control over this color generations not over its randomness
data	array	data={[{"word":"gt feature recipe","value":275},...]}	true	data that you will provide for word cloud

Contribution

If you want to work in this project. fork it, use the files from

src/lib/WordCloud

component to work. and,

npm run build

to build.

and send a pull request.

Versioning

Current Version: 0.1.7

Authors

• Sazzad Sazib - Frontend Developer - Misfit Technologies

License

This project is licensed under the MIT License - see the LICENSE.md file for details