react-wordcloud-generator

A customizable and interactive word cloud component for React. Displays words with sizes proportional to their values in a variety of shapes, with hover and click interactivity.

Installation

npm install react-wordcloud-generator

Usage

import React from 'react'
import { ReactWordcloud } from 'react-wordcloud-generator'

const words = [
  { text: 'React', value: 100 },
  { text: 'JavaScript', value: 80 },
  { text: 'TypeScript', value: 75 },
  { text: 'Frontend', value: 60 },
  { text: 'Node.js', value: 50 },
  { text: 'CSS', value: 45 },
  { text: 'HTML', value: 40 },
  { text: 'Web Development', value: 30 },
  { text: 'APIs', value: 25 },
  { text: 'GitHub', value: 20 },
]

const MyComponent = () => {
  return (
    <ReactWordcloud
      words={words}
      width={800}
      height={600}
      minFontSize={10}
      maxFontSize={50}
      shape="circular"
      colors={['#1e3a8a', '#3b82f6', '#93c5fd', '#bfdbfe']}
      callbacks={{
        onWordClick: (word) => console.log('Clicked:', word),
        onWordMouseOver: (word) => console.log('Hovered:', word),
      }}
    />
  )
}

export default MyComponent

Props

Required Props

| Prop | Type | Description | | --- | --- | --- | | words | Word[] | Array of words to display, each with a text and value. |

Optional Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | width | number \| string | '100%' | Width of the word cloud container. | | height | number \| string | '100%' | Height of the word cloud container. | | shape | 'circular' \| 'horizontal' \| 'loose' \| 'archimedean' | 'circular' | Shape of the word cloud layout. | | minFontSize | number | 5 | Minimum font size for the words. | | maxFontSize | number | 30 | Maximum font size for the words. | | colors | string[] | ['#1e3a8a', '#3b82f6', '#93c5fd', '#bfdbfe'] | Array of colors for the words. | | callbacks | Callbacks | {} | Event handlers for word interactions. | | tooltipStyles | TooltipStyles | {} | Styles for the tooltip displayed on hover. | | renderTooltip | (word: PlacedWord) => ReactNode | undefined | Custom function to render a tooltip for a word. |

Word Interface

interface Word {
  text: string
  value: number
}

Callbacks Interface

interface Callbacks {
  getWordColor?: (word: Word) => string
  onWordClick?: (word: PlacedWord) => void
  onWordMouseOver?: (word: PlacedWord) => void
}

TooltipStyles Interface

interface TooltipStyles {
  container?: React.CSSProperties
  content?: React.CSSProperties
  backgroundColor?: string
  textColor?: string
  borderRadius?: string
  padding?: string
  boxShadow?: string
}

Features

• Customizable shapes: circular, horizontal, loose, archimedean
• Configurable font sizes and colors
• Interactive events (hover and click)
• Responsive layout
• Custom tooltip rendering
• Deterministic layout (no random flickering on re-renders)
• Zero CSS dependencies — works in any React project

License

MIT