🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The react-tag-cloud enables you to create tag and word clouds in your React app using d3.js library.

Others React

Documentation

react-tag-cloud ☁️

Create beautiful tag/word clouds using React. Uses the wonderful d3-cloud under the hood.

react-tag-cloud-image

View live demo here (edit code)

Installation

npm install react-tag-cloud or yarn add react-tag-cloud 

Usage

import TagCloud from 'react-tag-cloud'; import randomColor from 'randomcolor';  class MyCloud extends Component {   render() {     return (       <TagCloud          style={{           fontFamily: 'sans-serif',           fontSize: 30,           fontWeight: 'bold',           fontStyle: 'italic',           color: () => randomColor(),           padding: 5,           width: '100%',           height: '100%'         }}>         <div style={{fontSize: 50}}>react</div>         <div style={{color: 'green'}}>tag</div>         <div rotate={90}>cloud</div>         ...       </TagCloud>     );   } }

Documentation

<TagCloud> props:

name description type default
style.fontSize Font size needed for calculating layout Function/Number 20
style.fontFamily Font family needed for calculating layout Function/String serif
style.fontWeight Font weight needed for calculating layout Function/Number normal
style.fontStyle Font style needed for calculating layout Function/String normal
style.padding Padding between tags (px) Function/Number 1
style.color Color to be used by tags Function/String (none)
rotate Rotation in degrees Function/Number 0
spiral Spiral Function/String archimedean
random Randomizer function Function Math.random

Any component can be used as a child component. TagCloud scans the child components for the following props for its layout calculation:

name description type default
style.fontSize Font size needed for calculating layout Function/Number 20
style.fontFamily Font family needed for calculating layout Function/String serif
style.fontWeight Font weight needed for calculating layout Function/Number normal
style.fontStyle Font style needed for calculating layout Function/String normal
style.padding Padding between tags (px) Function/Number 1
style.color Color to be used by tag Function/String (none)
rotate Rotation in degrees Function/Number 0

Examples

Resources

License

MIT

Cool?

Do you think this cool and useful? Consider buying me a coffee!
Buy Me A Coffee


You May Also Like