react-wordcloud-generator

React Wordcloud Generator is a customizable and interactive word cloud generator built with React. It enables developers to display words with sizes proportional to their values in a variety of shapes, with interactivity for mouse hover and clicks.

Installation

npm install react-wordcloud-generator

Usage

Here is an example of how to use the ReactWordcloud component:

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 },
  { text: 'UI/UX', value: 18 },
  { text: 'Programming', value: 15 }
]

const MyComponent = () => {
  return (
    <ReactWordcloud
      words={words}
      width={800}
      height={600}
      minFontSize={10}
      maxFontSize={50}
      shape="horizontal"
      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.
options	Options	{}	Additional configuration options for advanced use cases.
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.
colors	string[]	['#1e3a8a', '#3b82f6', '#93c5fd', '#bfdbfe']	Array of colors for the words.

Word Interface

interface Word {
  text: string; // The word to display
  value: number; // The weight or importance of the word
}

Callbacks Interface

interface Callbacks {
  onWordClick?: (word: PlacedWord) => void; // Function triggered on word click
  onWordMouseOver?: (word: PlacedWord) => void; // Function triggered on word hover
}

TooltipStyles Interface

interface TooltipStyles {
  backgroundColor?: string;
  color?: 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.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Feel free to contribute or report issues to improve this package! Happy coding! 🎉