1.1.4 • Published 7 months ago
react-wordcloud-generator v1.1.4
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! 🎉