word-cloud-react
    Overview
    Reviews
    Code
    Tutorials
    Playground
    Contributors
    Issues
    Documentation
    Chat

word-cloud-react

A library of to show Word Cloud in ReactJs ![alt tag](https://github.com/sazzadsazib/word-cloud-react/blob/master/Docs/word%20cloud%20react.png)

0.2.0  •  Updated 1 years ago  •  by Md. Sazzadul Islam  •  MIT License

Word Cloud React · GitHub license GitHub license

A library of to show Word Cloud in ReactJs alt tag

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

License

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

Popularity

Stars
0

Maintenance

Development

Last ver 1 year ago
Created 1 year ago
Last commit 1 year ago
6 days between commits

Technology

Node version: 10.12.0
9.8K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

3 contributors
Sazzad Sazib
Maintainer, 24 commits
Works at alice-labs
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.