rtc
react-tag-cloud
npm i react-tag-cloud
rtc

react-tag-cloud

Create beautiful tag/word clouds using React ☁️

by Hein Rutjes

1.3.3 (see all)License:MITTypeScript:Built-In
Categories:React Word Cloud
npm i react-tag-cloud
Readme

THIS REPOSITORY IS NO LONGER MAINTAINED

Looking for an alternative? Please have a look at react-tagcloud.

If you are interested in maintaining this repository (and taking ownership of it), please reach out to me here.

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:

namedescriptiontypedefault
style.fontSizeFont size needed for calculating layoutFunction/Number20
style.fontFamilyFont family needed for calculating layoutFunction/Stringserif
style.fontWeightFont weight needed for calculating layoutFunction/Numbernormal
style.fontStyleFont style needed for calculating layoutFunction/Stringnormal
style.paddingPadding between tags (px)Function/Number1
style.colorColor to be used by tagsFunction/String(none)
rotateRotation in degreesFunction/Number0
spiralSpiralFunction/Stringarchimedean
randomRandomizer functionFunctionMath.random

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

namedescriptiontypedefault
style.fontSizeFont size needed for calculating layoutFunction/Number20
style.fontFamilyFont family needed for calculating layoutFunction/Stringserif
style.fontWeightFont weight needed for calculating layoutFunction/Numbernormal
style.fontStyleFont style needed for calculating layoutFunction/Stringnormal
style.paddingPadding between tags (px)Function/Number1
style.colorColor to be used by tagFunction/String(none)
rotateRotation in degreesFunction/Number0

Examples

Resources

License

MIT

Cool?

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