Adorable Word Cloud ✨
![word cloud example](https://github.com/INDIE-RO/adorable-word-cloud/raw/HEAD/docs/assets/wordcloud-example.gif)
Adorable Word Cloud is a React component powered by D3 for creating dynamic and customizable word clouds.
Installation
npm
npm install adorable-word-cloud
yarn
yarn add adorable-word-cloud
User Guide
import React from 'react';
import { AdorableWordCloud, CloudWord, Options, Callbacks } from 'adorable-word-cloud';
const words: CloudWord[] = [
{ text: 'Hello', value: 30 },
{ text: 'World', value: 20 },
{ text: 'React', value: 25 },
];
const options: Options = {
colors: ['#B0E650', '#ff7f0e', '#4DD5CB', '#568CEC', '#CE7DFF', '#4FD87D'],
fontFamily: 'JalnanGothic',
fontSizeRange: [20, 60],
rotationDivision: 0,
};
const callbacks: Callbacks = {
onWordClick: (word: CloudWord) => {
console.log(word.text);
},
};
const App = () => {
return (
<div style={{ width: '100%', height: '400px' }}>
<AdorableWordCloud words={words} options={options} callbacks={callbacks} />
</div>
);
};
export default App;
Props
words
(required)
An array of objects representing words in the word cloud. Each object must have text
(string) and value
(number) properties.
options
(optional)
You can customize the appearance and behavior of the word cloud by passing options and callbacks as props to AdorableWordCloud.
An object to customize various aspects of the word cloud appearance:
interface Options {
colors?: string[];
enableRandomization?: boolean;
fontFamily?: string;
fontStyle?: FontStyle;
fontWeight?: FontWeight;
fontSizeRange?: [number, number];
padding?: number;
rotationDivision?: number;
rotationAngleRange?: [number, number];
spiral?: Spiral;
transitionDuration?: number;
}
callbacks
(optional)
An object containing callback functions:
interface Callbacks {
onWordClick?: (word: CloudWord) => void;
}
Development Environment
React v18
TypeScript v5
d3 v7
d3-cloud v1
vite v5
Explore More in Storybook
Explore additional examples and configurations in our Storybook.
Browser Support
|
|
Latest ✓
|
Latest ✓
|
License
This project is licensed under the MIT License.