Tag/Word Cloud Component For React

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

Installation:

# Yarn
$ yarn add react-tag-cloud

# NPM
$ npm install react-tag-cloud --save

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
        }}>
        <div style={{fontSize: 50}}>react</div>
        <div style={{color: 'green'}}>tag</div>
        <div rotate={90}>cloud</div>
        ...
      </TagCloud>
    );
  }
}

Default props.

style: {
  fontFamily: 'serif',
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontSize: 20,
  padding: 1
},
rotate: 0,
spiral: 'archimedean',
random: Math.random

Preview:

Download Details:

Author: IjzerenHein

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/IjzerenHein/react-tag-cloud

License: MIT