Full Documentation

npm / demo

Another tag cloud for react with two variable fontSize and opacity, using the wonderful d3-cloud under the hood.

Install

$ npm install d3-tagcloud-for-react

Usage

import React, { Component } from 'react'
import TagCloud, {renderData} from 'd3-tagcloud-for-react';

const colorarray = [
  '#8c5fc4',
  '#61b8ff',
  '#f7d286',
  '#e86971',
  '#76bb7f',
  '#5bbeca',
]
const data = [
  {
  label: 'React',
  fontSize: 10,
  opacity: 8,
  color:'blue'
  },
  {
  label: 'jQuery',
  fontSize: 9,
  opacity: 9,
  },
  {
  label: 'ECMAScript 6',
  fontSize: 4,
  opacity: 7,
  },
  {
  label: 'webpack',
  fontSize: 4,
  opacity: 4,
  },
  {
  label: 'Redux',
  fontSize: 4,
  opacity: 7,
  },
  {
  label: 'HTML5',
  fontSize: 9,
  opacity: 9,
  },
  {
  label: 'JSON APIs',
  fontSize: 9,
  opacity: 6,
  },
  {
  label: 'JavaScript',
  fontSize: 9,
  opacity: 8,
  },
  {
  label: 'CSS3',
  fontSize: 9,
  opacity: 9,
  },
  {
  label: 'PHP',
  fontSize: 8,
  opacity: 3,
  },
  {
  label: 'MySQL',
  fontSize: 8,
  opacity: 4,
  },
  {
  label: 'WordPress',
  fontSize: 9,
  opacity: 8,
  },
  {
  label: 'Github',
  fontSize: 6,
  opacity: 5,
  },
  {
  label: 'SASS',
  fontSize: 6,
  opacity: 6,
  },
  {
  label: 'Node.js',
  fontSize: 4,
  opacity: 4,
  },
  {
  label: 'JSX',
  fontSize: 8,
  opacity: 5,
  },
  {
  label: 'SEO',
  fontSize: 9,
  opacity: 8,
  },
  {
  label: 'Redux Saga',
  fontSize: 4,
  opacity: 6,
  },
  {
  label: 'Immutable',
  fontSize: 4,
  opacity: 5,
  },
  {
  label: 'CSS Javascript',
  fontSize: 4,
  opacity: 6,
  },
  {
  label: 'GraphQL',
  fontSize: 1,
  opacity: 4,
  },
]

class DemoCloud extends Component {
  render() {
    return (
      <TagCloud 
        className='tag-cloud'
        // rotate={() => Math.round(Math.random() * 180)}
        // spiral={1}
        style={{
          fontFamily: 'sans-serif',
          // fontSize: () => Math.round(Math.random() * 50) + 16,
          fontSize: 30,
          // color: () => randomColor(colorarray),
          padding: 5,
          width: '100%',
          height: '600px',
        }}
        data={data}
        colorarray={colorarray}
      >
        {renderData(data)}
        <div
          style={{
            fontSize: 30,
            fontWeight: 'bold',
            opacity: 0.9,
            padding: 12,
            color: 'black'
          }}
        >
          Black
        </div>
      </TagCloud>
    );
  }
}

<TagCloud> props

name	description	type	default
style.fontSize	Font size needed for calculating layout	Function/Number	30
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	10
style.color	Color to be used by tags	Function/String	randomColor
rotate	Rotation in degrees	Function/Number	0
colorarray	Color Palette	Array	null
data	Tags Array	Array	null
random	Randomizer function	Function	Math.random

<TagCloud> child component props

You can create or use any component as a child component. TagCloud looks for the following props for its layout calculation:

name	description	type	default
style.fontSize	Font size needed for calculating layout	Function/Number	30
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.opacity	Opacity for Tags	Function/Number	1
style.padding	Padding between tags (px)	Function/Number	10
style.color	Color to be used by tag	Function/String	(none)
rotate	Rotation in degrees	Function/Number	0

Showcase

Veysi YILDIZ (Cv)

License

MIT