https://github.com/madox2/react-tagcloud
Tag/word cloud component for react https://madox2.github.io/react-tagcloud/
https://github.com/madox2/react-tagcloud
react tag-cloud word-cloud
Last synced: 5 months ago
JSON representation
Tag/word cloud component for react https://madox2.github.io/react-tagcloud/
- Host: GitHub
- URL: https://github.com/madox2/react-tagcloud
- Owner: madox2
- License: mit
- Created: 2015-12-01T20:17:24.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-22T12:02:47.000Z (almost 2 years ago)
- Last Synced: 2025-05-13T01:38:10.106Z (5 months ago)
- Topics: react, tag-cloud, word-cloud
- Language: JavaScript
- Homepage:
- Size: 8.55 MB
- Stars: 198
- Watchers: 3
- Forks: 32
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tagcloud
Simple and extensible tag/word cloud React component.
See the [demo](https://madox2.github.io/react-tagcloud/).
## Installation
```
npm install react-tagcloud
# or with yarn
yarn add react-tagcloud
# react < 16.8.0
npm install react-tagcloud@1.4
```
## Basic usage
```javascript
import { TagCloud } from 'react-tagcloud'
const data = [
{ value: 'JavaScript', count: 38 },
{ value: 'React', count: 30 },
{ value: 'Nodejs', count: 28 },
{ value: 'Express.js', count: 25 },
{ value: 'HTML5', count: 33 },
{ value: 'MongoDB', count: 18 },
{ value: 'CSS3', count: 20 },
]
const SimpleCloud = () => (
alert(`'${tag.value}' was selected!`)}
/>
)
```
### React Native
In react native projects import tag cloud from the package relative path `react-tagcloud/rn`.
```javascript
import React from 'react';
import { Alert } from 'react-native';
import { TagCloud } from 'react-tagcloud/rn'
const data = [
// ...
]
const SimpleCloud = () => (
Alert.alert(`'${tag.value}' was selected!`)}
/>
)
```
## API
### Options
`` component has props listed below:
| Option | Type | Required | Note |
|-----------|----------|--------|---|
|`tags` |`Array` |`true`|Array of objects that represent tags (see [Tag object](#tag-object))|
|`maxSize` |`Number` |`true` |Maximal font size (in px) used in cloud|
|`minSize` |`Number` |`true` |Minimal font size (in px) used in cloud|
|`shuffle` |`Boolean` |`false`|If true, tags are shuffled. When `tags` are modified, cloud is re-shuffled. Default: `true`|
|`colorOptions` |`Object` |`false`|Random color options (see [randomColor#options](https://github.com/davidmerfield/randomColor#options))|
|`disableRandomColor` |`Boolean` |`false`|If `true`, random color is not used|
|`randomSeed` |`Number` |`false`|Random seed used to shuffle tags and generate color|
|`renderer` |`Function`|`false`|Function used to render tag|
|`randomNumberGenerator`|`Function`|`false`|DEPRECATED, use `randomSeed` instead. Specifies a custom random number generator that is being used by shuffle algorithm. Default: `Math.random`|
*Note:* Furthermore you can pass any other prop and it will be forwarded to the wrapping `
` component (e.g. `style`, `className`).
### Tag object
Each tag is represented by object literal having following properties:
| Property | Type | Required | Note |
|----------|------|----------|------|
|`value`|`String`|`true` |String value to be displayed|
|`count`|`Number`|`true` |Represents frequency of the tag that is used to calculate tag size|
|`key` |`String`|`false`|Tag element key. If it is not provided, `value` property will be used instead (however it can fail if you don't have unique tag values. It is highly recommeded to use `key` property)|
|`color`|`String`|`false`|Represents color of the tag. If it is not provided, random color will be used instead|
|`props`|`Object`|`false`|Props to be passed to a particular tag component|
### Events
Event handlers can be passed to the `` props.
Each handler has two arguments: the first is related tag object and the second is DOM event object.
Currently supported events: `onClick`, `onDoubleClick`, `onMouseMove`
*Note:* Feel free to open issue if any other event is needed.
### Styles
Default class names are `tag-cloud` for the wrapping container, and `tag-cloud-tag` for a particular tag.
Styles passed to `` props will be applied to the wrapping container.
### Renderer
Rendering of tags can be fully customized by providing custom render function and passing it to the `renderer` prop.
By default is used [defaultRenderer](https://github.com/madox2/react-tagcloud/blob/master/src/defaultRenderer.js).
Render function has three arguments - `tag`, `size` and `color`.
For example:
```javascript
import { TagCloud } from 'react-tagcloud'
const customRenderer = (tag, size, color) => {
return (
{tag.value}
)
}
const CustomizedCloud = () => (
)
```
## More examples
* [Simple tag cloud](https://github.com/madox2/react-tagcloud/blob/master/examples/src/simple-cloud.js)
* [Custom color options](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-color-options.js)
* [Custom styles](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-styles.js)
* [Custom tag props](https://github.com/madox2/react-tagcloud/blob/master/examples/src/tag-props.js)
* [Custom renderer](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-renderer.js)
## Testing
Install dev modules:
```
yarn install
```
### Run unit tests
```
yarn test
```
### Run examples
```
cd examples
yarn install
yarn start
```
and open browser at `http://localhost:3000`
## License
[MIT License](https://github.com/madox2/react-tagcloud/blob/master/LICENSE)