# 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)

Latest version **0.2.0** (published 2019-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install word-cloud-react
pnpm add word-cloud-react
yarn add word-cloud-react
bun add word-cloud-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-03-12 |
| First published | 2018-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sazzadsazib |
| Maintainers | sazzadsazib |

## Links

- npm: https://www.npmjs.com/package/word-cloud-react
- Repository: https://github.com/sazzadsazib/word-cloud-react
- Homepage: https://github.com/sazzadsazib/word-cloud-react#readme
- Issues: https://github.com/sazzadsazib/word-cloud-react/issues
- npm.io page: https://npm.io/package/word-cloud-react

## Dependencies (5)

- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.2.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.3.4
- [react-tooltip](https://npm.io/package/react-tooltip.md) ^3.9.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^7.0.2

## Recent versions

- 0.2.0 (latest) — 2019-03-12
- 0.1.10 — 2018-11-18
- 0.1.9 — 2018-11-18
- 0.1.8 — 2018-11-18
- 0.1.7 — 2018-10-18
- 0.1.6 — 2018-10-17
- 0.1.5 — 2018-10-17
- 0.1.4 — 2018-10-17
- 0.1.3 — 2018-10-17
- 0.1.2 — 2018-10-17
- 0.1.1 — 2018-10-16
- 0.1.0 — 2018-10-16

## README

# Word Cloud React · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sazzadsazib/word-cloud-react/blob/master/LICENSE) [![GitHub license](https://img.shields.io/badge/word--cloud--react-0.1.7-green.svg)](https://github.com/sazzadsazib/word-cloud-react/blob/master/LICENSE) 
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)

## Getting Started

To install the package run command.
<br/>
```npm i word-cloud-react --save``` 
<br/>
or using yarn <br/>
```yarn add word-cloud-react```
<br/>
import the packages to your react Component, <br/>
```import { WordCloud } from "word-cloud-react";```
<br/>
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',]}/>
```
<br/>

### Props

There are different conditional Props available in this component, they are, <br/>

|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
<br/>


### Contribution

If you want to work in this project. fork it, use the files from 
```
src/lib/WordCloud
``` 
component to work. and,
```$xslt
npm run build
```
to build.

and send a pull request.



## Versioning

Current Version: ```0.1.7```

## Authors

* **Sazzad Sazib** - *Frontend Developer* - [Misfit Technologies ](http://misfit.tech/)



## License

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

---
_Source: https://npm.io/package/word-cloud-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._