### TagCloud Constructor and Usage

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Demonstrates how to install and use TagCloud.js via npm, in the browser, and provides an overview of the constructor parameters.

```APIDOC
## Installation

### npm

```bash
$ npm i -S TagCloud
```

### Browser

```html
<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>
```

## Usage

### npm Usage Example

```javascript
const TagCloud = require('TagCloud');

const container = '.tagcloud';
const texts = [
    '3D',
    'TagCloud',
    'JavaScript',
    'CSS3',
    'Animation',
    'Interactive',
    'Mouse',
    'Rolling',
    'Sphere',
    '6KB',
    'v2.x',
];
const options = {};

TagCloud(container, texts, options);
```

### Browser Usage Example

```javascript
TagCloud(container, texts, options);
```

### React

For React integration, use the community package [@frank-mayer/react-tag-cloud](https://github.com/Frank-Mayer/react-tag-cloud).

## Constructor

### TagCloud(container, texts, options)

Initializes a new TagCloud instance.

#### Parameters

- **container** (String | HTMLElement | Array) - Required - The DOM element or selector for the tag cloud container.
- **texts** (Array) - Required - An array of strings or HTML elements to display as tags.
- **options** (Object) - Optional - Configuration options for the tag cloud.

#### options

- **radius** (Number) - Optional - The rolling radius of the tag cloud. Default: `100` (px).
- **maxSpeed** (String) - Optional - The maximum rolling speed. Accepts `'slow'`, `'normal'`, `'fast'`. Default: `'normal'`.
- **initSpeed** (String) - Optional - The initial rolling speed. Accepts `'slow'`, `'normal'`, `'fast'`. Default: `'normal'`.
- **direction** (Number) - Optional - The initial rolling direction in degrees (clockwise). Default: `135` (right-bottom).
- **keep** (Boolean) - Optional - Whether to keep rolling after mouse out. Default: `true`.
- **reverseDirection** (Boolean) - Optional - Whether to reverse direction when mouse controls it. Default: `false`.
- **containerClass** (String) - Optional - CSS class for the container. Default: `'tagcloud'`.
- **itemClass** (String) - Optional - CSS class for tag items. Default: `'tagcloud--item'`.
- **useContainerInlineStyles** (Boolean) - Optional - Apply inline styles to the container. Default: `true`.
- **useItemInlineStyles** (Boolean) - Optional - Apply inline styles to items. Default: `true`.
- **useHTML** (Boolean) - Optional - Allow HTML tags in texts. Default: `false`.
```

--------------------------------

### Install TagCloud.js via npm

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Use npm to install the TagCloud.js library for your project.

```bash
$ npm i -S TagCloud
```

--------------------------------

### Initialize TagCloud with npm

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Import and initialize TagCloud using JavaScript with npm. Requires a container element and an array of texts.

```javascript
const TagCloud = require('TagCloud');

const container = '.tagcloud';
const texts = [
    '3D',
    'TagCloud',
    'JavaScript',
    'CSS3',
    'Animation',
    'Interactive',
    'Mouse',
    'Rolling',
    'Sphere',
    '6KB',
    'v2.x',
];
const options = {};

TagCloud(container, texts, options);
```

--------------------------------

### Initialize TagCloud with CSS Selector

Source: https://context7.com/cong-min/tagcloud/llms.txt

Basic initialization using a CSS selector for the container element. Requires an array of text labels.

```javascript
// Basic initialization with CSS selector
const tagcloud = TagCloud('.tagcloud-container', [
    'JavaScript', 'TypeScript', 'React', 'Vue', 'Angular',
    'Node.js', 'Python', 'Docker', 'Kubernetes', 'AWS'
]);
```

--------------------------------

### Initialize TagCloud with Advanced Options

Source: https://context7.com/cong-min/tagcloud/llms.txt

Advanced initialization with a specific container element, text labels, and a comprehensive set of configuration options for customization.

```javascript
// Advanced initialization with all options
const container = document.getElementById('my-tagcloud');
const texts = ['3D', 'TagCloud', 'Interactive', 'Animation', 'Sphere'];

const tagcloud = TagCloud(container, texts, {
    radius: 150,                    // Rolling radius in pixels (default: 100)
    maxSpeed: 'fast',               // Max speed: 'slow' | 'normal' | 'fast' (default: 'normal')
    initSpeed: 'slow',              // Initial speed: 'slow' | 'normal' | 'fast' (default: 'normal')
    direction: 135,                 // Initial direction in degrees, clockwise (default: 135)
    keep: true,                     // Keep rolling after mouse leaves (default: true)
    reverseDirection: false,        // Reverse mouse control direction (default: false)
    containerClass: 'tagcloud',     // CSS class for container (default: 'tagcloud')
    itemClass: 'tagcloud--item',    // CSS class for items (default: 'tagcloud--item')
    useContainerInlineStyles: true, // Apply inline styles to container (default: true)
    useItemInlineStyles: true,      // Apply inline styles to items (default: true)
    useHTML: false                  // Parse text as HTML (default: false)
});
```

--------------------------------

### Initialize TagCloud for Multiple Containers

Source: https://context7.com/cong-min/tagcloud/llms.txt

Initializes multiple tag cloud instances by providing a CSS selector that matches multiple elements. Returns an array of instances.

```javascript
// Multiple containers - returns array of instances
const instances = TagCloud('.multiple-clouds', texts, { radius: 80 });
```

--------------------------------

### Initialize TagCloud in Browser

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Initialize TagCloud in the browser after including the script. Requires a container element and an array of texts.

```javascript
TagCloud(container, texts, options);
```

--------------------------------

### TagCloud Instance Methods

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Details the available methods for interacting with an active TagCloud instance after initialization.

```APIDOC
## Instance Methods

### tagcloud.update(texts)

Updates the list of tags displayed in the tag cloud.

- **texts** (Array) - Required - The new array of tag texts or HTML elements.

### tagcloud.pause()

Pauses the tag cloud animation.

### tagcloud.resume()

Resumes the tag cloud animation after it has been paused.

### tagcloud.destroy()

Removes the tag cloud instance and cleans up associated elements and event listeners.
```

--------------------------------

### Initialize TagCloud with Default Style

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Initializes a TagCloud instance with a default style. Requires the target element selector and an array of texts. The created instance is logged to the console.

```javascript
var texts = [
  '3D',
  'TagCloud',
  'JavaScript',
  'CSS3',
  'Animation',
  'Interactive',
  'Mouse',
  'Rolling',
  'Sphere',
  '6KB',
  'v2.x',
];
var tc = TagCloud('.content', texts);
console.log(tc);
```

--------------------------------

### TagCloud Constructor

Source: https://context7.com/cong-min/tagcloud/llms.txt

Initializes a new 3D tag cloud instance attached to a container element.

```APIDOC
## TagCloud Constructor

### Description
Creates a new 3D tag cloud instance by attaching it to a container element. The constructor accepts a CSS selector string, HTMLElement, or array of elements, along with an array of text labels and optional configuration.

### Parameters
- **container** (string|HTMLElement|Array) - Required - The target element(s) to attach the cloud to.
- **texts** (Array) - Required - An array of strings representing the tags.
- **options** (Object) - Optional - Configuration object for radius, speed, direction, and styling.
```

--------------------------------

### CommonJS and ES Module Usage

Source: https://context7.com/cong-min/tagcloud/llms.txt

Import TagCloud in Node.js environments or modern JavaScript bundlers. Initialization should occur after the DOM is ready, and cleanup is recommended for SPAs.

```javascript
// CommonJS
const TagCloud = require('TagCloud');

// ES Module
import TagCloud from 'TagCloud';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    const skills = [
        'JavaScript', 'TypeScript', 'Python', 'Go',
        'React', 'Vue', 'Docker', 'AWS', 'GraphQL'
    ];

    const tagcloud = TagCloud('#skills-cloud', skills, {
        radius: 200,
        maxSpeed: 'fast',
        initSpeed: 'normal'
    });

    // Cleanup on component unmount (for SPA frameworks)
    return () => tagcloud.destroy();
});
```

--------------------------------

### Custom Event Handling

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Explains how to attach custom event listeners to the tag cloud instance using event delegation.

```APIDOC
## Custom Event Handler

### Use event delegation bind event listener to TagCloud instance root element

This section indicates that event delegation can be used to bind event listeners to the root element of the TagCloud instance. Specific examples or methods for this are not detailed in the provided text.
```

--------------------------------

### Switch to Light Style

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Applies the light style to the TagCloud by adding the 'light' class to the document body. This function should be called to change the visual theme.

```javascript
function toLight() {
  document.body.classList.add('light');
}
```

--------------------------------

### tagcloud.resume()

Source: https://context7.com/cong-min/tagcloud/llms.txt

Resumes a paused tag cloud animation.

```APIDOC
## tagcloud.resume()

### Description
Resumes a paused tag cloud animation from where it was stopped. The tags continue rotating with the same momentum and direction.
```

--------------------------------

### Switch to Default Style

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Removes the 'light' class from the document body, reverting the TagCloud to its default styling. Call this function to switch back from the light theme.

```javascript
function toDefault() {
  document.body.classList.remove('light');
}
```

--------------------------------

### Create New TagCloud Instances

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Creates new TagCloud instances, up to a maximum of three. Each new instance is added to the 'otherTcs' array. This is useful for managing multiple independent tag clouds.

```javascript
var otherTcs = [];
function toCreate() {
  if (otherTcs.length >= 3) return;
  otherTcs.push(TagCloud('.content', texts));
}
```

--------------------------------

### Handle Click Events with Delegation

Source: https://context7.com/cong-min/tagcloud/llms.txt

Use event delegation on the container to handle click events on individual tag items. This approach is efficient for managing multiple event listeners.

```javascript
const tagcloud = TagCloud('.content', [
    'JavaScript', 'React', 'Vue', 'Angular', 'Node.js'
], {
    itemClass: 'tagcloud--item'
});

// Add click handler using event delegation
const container = document.querySelector('.content');
container.addEventListener('click', function(e) {
    if (e.target.className === 'tagcloud--item') {
        const tagText = e.target.innerText;
        console.log('Clicked tag:', tagText);

        // Example: search for the tag
        window.open(`https://www.google.com/search?q=${encodeURIComponent(tagText)}`, '_blank');
    }
});

// Remove click handler when needed
function clickHandler(e) {
    if (e.target.className === 'tagcloud--item') {
        alert(`Selected: ${e.target.innerText}`);
    }
}
container.addEventListener('click', clickHandler);
container.removeEventListener('click', clickHandler);
```

--------------------------------

### Include TagCloud.js via Browser

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Include the TagCloud.js library using a script tag in your HTML for browser usage.

```html
<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>
```

--------------------------------

### tagcloud.pause()

Source: https://context7.com/cong-min/tagcloud/llms.txt

Pauses the tag cloud animation.

```APIDOC
## tagcloud.pause()

### Description
Pauses the tag cloud animation, freezing all tags in their current positions. The animation state is preserved and can be resumed later.
```

--------------------------------

### Resume TagCloud Animations

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Resumes the animation for all active TagCloud instances, including the primary one ('tc') and any in the 'otherTcs' array. This function iterates through all instances and calls their 'resume()' method.

```javascript
function resume() {
  [].concat(tc, otherTcs).forEach(function (e) { return e.resume() });
}
```

--------------------------------

### Resume TagCloud animation

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Call the resume method on a TagCloud instance to restart the animation after it has been paused.

```javascript
tagcloud.resume();
```

--------------------------------

### Bind Click Event Listener using Event Delegation

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Attach a click event listener to the root element of the TagCloud. This listener checks if the clicked element is a tagcloud item and performs an action, such as opening a Google search.

```javascript
let rootEl = document.querySelector('.content');
rootEl.addEventListener('click', function clickEventHandler(e) {
    if (e.target.className === 'tagcloud--item') {
        window.open(`https://www.google.com/search?q=${e.target.innerText}`, '_blank');
        // your code here
    }
});
```

--------------------------------

### Use HTML Content in Tags

Source: https://context7.com/cong-min/tagcloud/llms.txt

Enable the useHTML option to render HTML markup inside tags, allowing for styled text, icons, or links. The update() method can be used to refresh content dynamically.

```javascript
const htmlTexts = [
    '<strong>Bold</strong>',
    '<em>Italic</em>',
    '<span style="color: red;">Red</span>',
    '<a href="#section1">Link</a>',
    '<i class="fa fa-star"></i> Star'
];

const tagcloud = TagCloud('.content', htmlTexts, {
    useHTML: true,
    radius: 120
});

// Update with new HTML content
tagcloud.update([
    '<span class="tag-primary">Primary</span>',
    '<span class="tag-secondary">Secondary</span>',
    '<img src="icon.png" alt="icon" style="width:20px">'
]);
```

--------------------------------

### Add Click Event Listener

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Adds a click event listener to the root element of the TagCloud. The listener triggers navigation to a Google search results page for the clicked tag. Ensure the 'clickEventHandler' function is defined.

```javascript
function addClickEvent() {
  var rootEl = document.querySelector('.content');
  rootEl.addEventListener('click', clickEventHandler);
}
```

--------------------------------

### tagcloud.update(texts)

Source: https://context7.com/cong-min/tagcloud/llms.txt

Dynamically updates the tag cloud with a new array of text labels.

```APIDOC
## tagcloud.update(texts)

### Description
Dynamically updates the tag cloud with a new array of text labels. Existing items are updated in place, new items are added with random positions, and excess items are removed automatically.

### Parameters
- **texts** (Array) - Required - The new array of text labels to display.
```

--------------------------------

### Click Event Handler for Tag Navigation

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Handles click events on TagCloud items. If the clicked element is a tag cloud item, it opens a new browser tab with a Google search for the tag's text. This function is intended to be used with 'addClickEvent'.

```javascript
function clickEventHandler(e) {
  if (e.target.className === 'tagcloud--item') {
    window.open(`https://www.google.com/search?q=${e.target.innerText}`, '_blank');
  }
}
```

--------------------------------

### Add a New Tag

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Adds a new tag ('New') to the existing texts array and updates the TagCloud instance. Ensure a TagCloud instance exists before calling this function.

```javascript
function addTag() {
  if (!tc) return;
  texts.push('New');
  tc.update(texts);
}
```

--------------------------------

### Update TagCloud with New Texts

Source: https://context7.com/cong-min/tagcloud/llms.txt

Dynamically updates the tag cloud with a new array of text labels. Handles adding, updating, and removing tags automatically.

```javascript
const tagcloud = TagCloud('.content', ['Initial', 'Tags', 'Here']);

// Update with new set of tags
const newTexts = [
    'Updated', 'Content', 'More', 'Tags', 'Added'
];
tagcloud.update(newTexts);

// Add a single tag
const currentTexts = ['JavaScript', 'Python', 'Go'];
currentTexts.push('Rust');
tagcloud.update(currentTexts);

// Remove tags by updating with smaller array
currentTexts.pop();
tagcloud.update(currentTexts);
```

--------------------------------

### Pause TagCloud Animations

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Pauses the animation for all active TagCloud instances, including the primary one ('tc') and any in the 'otherTcs' array. This function iterates through all instances and calls their 'pause()' method.

```javascript
function pause() {
  [].concat(tc, otherTcs).forEach(function (e) { return e.pause() });
}
```

--------------------------------

### tagcloud.destroy()

Source: https://context7.com/cong-min/tagcloud/llms.txt

Removes the tag cloud from the DOM.

```APIDOC
## tagcloud.destroy()

### Description
Completely removes the tag cloud from the DOM and cleans up all internal references. Use this when removing the component or before re-initializing.
```

--------------------------------

### Pause TagCloud animation

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Call the pause method on a TagCloud instance to stop the animation.

```javascript
tagcloud.pause();
```

--------------------------------

### Destroy TagCloud instance

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Call the destroy method on a TagCloud instance to remove it and clean up event listeners.

```javascript
tagcloud.destroy();
```

--------------------------------

### Update TagCloud texts

Source: https://github.com/cong-min/tagcloud/blob/master/README.md

Use the update method on a TagCloud instance to change the list of texts displayed in the cloud.

```javascript
tagcloud.update(texts);
```

--------------------------------

### Destroy the Last Created TagCloud

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Destroys the most recently created TagCloud instance from the 'otherTcs' array. This function will not execute if there are no instances to destroy.

```javascript
function toDestroy() {
  var last = otherTcs[otherTcs.length - 1];
  if (!last) return;
  last.destroy();
  otherTcs.pop();
}
```

--------------------------------

### Remove the Last Tag

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Removes the last tag from the texts array and updates the TagCloud instance. This function will not execute if no TagCloud instance is available.

```javascript
function removeTag() {
  if (!tc) return;
  texts.pop();
  tc.update(texts);
}
```

--------------------------------

### Remove Click Event Listener

Source: https://github.com/cong-min/tagcloud/blob/master/examples/index.html

Removes the click event listener from the root element of the TagCloud. This prevents further navigation when tags are clicked. Ensure the 'clickEventHandler' function was previously added.

```javascript
function removeClickEvent() {
  var rootEl = document.querySelector('.content');
  rootEl.removeEventListener('click', clickEventHandler);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.