### Basic Word Cloud Example in React

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A fundamental example demonstrating how to use the WordCloud component with a predefined list of words. It shows the basic setup for rendering a word cloud in a React application.

```tsx
import { Word, WordCloud } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud words={words} width={300} height={200} />
    </div>
  );
}

export default App;
```

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

### Install and Run Tests with npm

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Commands to install project dependencies and run tests, including coverage, using npm. These commands are essential for verifying the library's functionality and ensuring code quality during development.

```bash
npm install

npm run test
npm run test:coverage
```

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

### Install @isoterik/react-word-cloud

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Instructions for installing the @isoterik/react-word-cloud library using npm or yarn package managers.

```bash
npm install @isoterik/react-word-cloud
# or
yarn add @isoterik/react-word-cloud
```

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

### Use AnimatedWordRenderer for Word Entrance Animations in React

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

This example demonstrates using the built-in `AnimatedWordRenderer` from @isoterik/react-word-cloud for smooth opacity and scale transitions when words enter the word cloud. It requires setting up a ref for the word element. The `animationDelay` prop can be customized.

```tsx
import { Word, WordCloud, WordCloudProps, AnimatedWordRenderer } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const animatedWordRenderer: WordCloudProps["renderWord"] = (data, ref) => (
  <AnimatedWordRenderer ref={ref} data={data} animationDelay={(_word, index) => index * 50} />
);

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud words={words} width={300} height={200} renderWord={animatedWordRenderer} />
    </div>
  );
}

export default App;
```

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

### Event Handling for Interactive Word Clouds in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Shows how to handle mouse events (click, mouseover, mouseout) and computation lifecycle events (start, word computed, complete) for an interactive word cloud. This example uses React hooks like `useCallback`.

```tsx
import {
  Word,
  WordCloud,
  FinalWordData,
  ComputedWordData,
} from "@isoterik/react-word-cloud";
import { useCallback } from "react";

const words: Word[] = [
  { text: "Click", value: 500 },
  { text: "Hover", value: 300 },
  { text: "Events", value: 700 },
];

function App() {
  const handleWordClick = useCallback(
    (word: FinalWordData, index: number) => {
      console.log("Clicked:", word.text, "at index", index);
    },
    []
  );

  const handleWordMouseOver = useCallback(
    (word: FinalWordData, index: number) => {
      console.log("Mouse over:", word.text);
    },
    []
  );

  const handleWordMouseOut = useCallback(
    (word: FinalWordData, index: number) => {
      console.log("Mouse out:", word.text);
    },
    []
  );

  const handleStartComputation = useCallback(() => {
    console.log("Layout computation started...");
  }, []);

  const handleWordComputed = useCallback(
    (word: ComputedWordData, index: number) => {
      console.log("Word computed:", word.text, "position:", word.x, word.y);
    },
    []
  );

  const handleCompleteComputation = useCallback(
    (words: ComputedWordData[]) => {
      console.log("Layout complete. Total words:", words.length);
    },
    []
  );

  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      onWordClick={handleWordClick}
      onWordMouseOver={handleWordMouseOver}
      onWordMouseOut={handleWordMouseOut}
      onStartComputation={handleStartComputation}
      onWordComputed={handleWordComputed}
      onCompleteComputation={handleCompleteComputation}
    />
  );
}

```

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

### Custom Tooltip Rendering for WordCloud in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Demonstrates how to customize tooltips for the `WordCloud` component using the `renderTooltip` prop and the `DefaultTooltipRenderer`. This example shows how to modify placement, transition, and styling of the tooltip, including text and value styles, and container background based on the word's fill.

```tsx
import {
  DefaultTooltipRenderer,
  Word,
  WordCloud,
  WordCloudProps,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "Tooltip", value: 500 },
  { text: "Hover", value: 300 },
  { text: "Interactive", value: 700 },
];

const customTooltipRenderer: WordCloudProps["renderTooltip"] = (data) => (
  <DefaultTooltipRenderer
    data={data}
    placement="bottom"
    transform={false}
    transitionDuration={300}
    containerStyle={{
      borderRadius: "10px",
      flexDirection: "column",
      minWidth: "100px",
      background: `${data.word?.fill}BF`,
    }}
    textStyle={{
      fontFamily: "Arial",
      fontSize: "16px",
    }}
    valueStyle={{
      fontSize: "12px",
      fontFamily: "monospace",
    }}
  />
);

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      enableTooltip
      renderTooltip={customTooltipRenderer}
    />
  );
}
```

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

### Enable Default Tooltip in React Word Cloud

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

This example shows how to enable the default tooltip functionality in the React Word Cloud component by setting the `enableTooltip` prop to `true`. It requires importing `Word` and `WordCloud` from `@isoterik/react-word-cloud` and providing an array of `Word` objects.

```tsx
import { Word, WordCloud } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud words={words} width={300} height={200} enableTooltip />
    </div>
  );
}

export default App;
```

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

### Layout Computation Start Event

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A function called at the beginning of the word cloud layout computation. Useful for initiating loading states or other pre-computation tasks.

```typescript
onStartComputation: () => void
```

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

### Customize Tooltip with DefaultTooltipRenderer in React Word Cloud

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

This example demonstrates how to customize the default tooltip's appearance in the React Word Cloud component using the `renderTooltip` prop with the `DefaultTooltipRenderer`. It allows for styling of placement, transforms, container, and text styles. Dependencies include `DefaultTooltipRenderer`, `Word`, `WordCloud`, and `WordCloudProps` from `@isoterik/react-word-cloud`.

```tsx
import { DefaultTooltipRenderer, Word, WordCloud, WordCloudProps } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const animatedWordRenderer: WordCloudProps["renderTooltip"] = (data) => (
  <DefaultTooltipRenderer
    data={data}
    placement="bottom"
    transform={false}
    containerStyle={{
      borderRadius: "10px",
      flexDirection: "column",
      minWidth: "100px",
      background: `${data.word?.fill}BF`, // 75% opacity
    }}
    textStyle={{
      fontFamily: "Arial",
      fontSize: "16px",
    }}
  />
);

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud
        words={words}
        width={300}
        height={200}
        enableTooltip
        renderTooltip={animatedWordRenderer}
      />
    </div>
  );
}

export default App;
```

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

### Customize Word Rendering with DefaultWordRenderer

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

The `DefaultWordRenderer` component serves as a base for custom word rendering within the `WordCloud` component. It allows for styling and event handling of individual words. This example demonstrates overriding default styles.

```tsx
import {
  Word,
  WordCloud,
  WordCloudProps,
  DefaultWordRenderer,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "Default", value: 500 },
  { text: "Renderer", value: 700 },
];

const customWordRenderer: WordCloudProps["renderWord"] = (data, ref) => (
  <DefaultWordRenderer
    ref={ref}
    data={data}
    textStyle={{
      cursor: "pointer",
      textDecoration: "underline",
    }}
  />
);

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      renderWord={customWordRenderer}
    />
  );
}

```

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

### Build and Link Local Package with Yalc

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Instructions for building the project locally and linking it to a local React application using yalc. This process allows for testing the library in a real-world environment before publishing.

```bash
npm run build:local

yalc link @isoterik/react-word-cloud

yalc remove @isoterik/react-word-cloud
```

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

### Custom Tooltip with useTooltip Hook in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Demonstrates how to create custom tooltips for word cloud elements using the `useTooltip` hook and integrates with floating-ui for positioning. It requires `@isoterik/react-word-cloud` and `floating-ui`.

```tsx
import {
  Word,
  WordCloud,
  WordCloudProps,
  TooltipRendererData,
  useTooltip,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "Custom", value: 500 },
  { text: "Tooltip", value: 700 },
];

const MyFloatingTooltip = ({ data }: { data: TooltipRendererData }) => {
  const { refs, floatingStyles } = useTooltip({
    data,
    placement: "top",
    transform: false,
  });

  return (
    <div
      ref={refs.setFloating}
      style={{ 
        background: "linear-gradient(135deg, rgba(50,50,50,0.95), rgba(30,30,30,0.95))",
        color: "#fff",
        padding: "10px 16px",
        borderRadius: "8px",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
        transition: "all 300ms ease-in-out",
        pointerEvents: "none",
        zIndex: 1000,
        opacity: data.word ? 1 : 0,
        ...floatingStyles,
      }}
    >
      <div style={{ fontWeight: "bold", fontSize: "14px" }}>
        {data.word?.text}
      </div>
      {data.word && (
        <div style={{ fontSize: "12px", opacity: 0.8 }}>
          Value: {data.word.value}
        </div>
      )}
    </div>
  );
};

const tooltipRenderer: WordCloudProps["renderTooltip"] = (data) => (
  <MyFloatingTooltip data={data} />
);

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      enableTooltip
      renderTooltip={tooltipRenderer}
    />
  );
}

```

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

### useTooltip Hook

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Hook for handling tooltip interactions using @floating-ui/react-dom, returning refs and floating styles.

```APIDOC
## useTooltip Hook

### Description
This hook provides a way to handle tooltip interactions with ease using `@floating-ui/react-dom`. It returns an object containing the tooltip refs and floating styles for positioning the tooltip.

### Parameters
- **data*** (`TooltipRendererData`) - The data object containing information about the word for which the tooltip is being rendered. This object includes the word's text, value, fill color, font family, font size, font weight, rotation angle, the underlying SVG element, layout size, and other properties.
- The rest of the parameters are from the `UseFloatingOptions` type provided by `@floating-ui/react-dom`.

### Return Value
The return value of the `useTooltip` hook is an object containing the tooltip refs and floating styles for positioning the tooltip

- **refs** (`TooltipRefs`) - An object containing the refs for the tooltip elements. The `setFloating` ref should be set on the floating element of the tooltip.
- **floatingStyles** (`React.CSSProperties`) - The style object to be applied to the floating element of the tooltip. This is useful for customizing the styles of the floating tooltip.
- And other properties from the `UseFloatingResult` type provided by `@floating-ui/react-dom`.
```

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

### Custom Tooltip Renderer for React Word Cloud

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Provides a custom tooltip renderer for the React Word Cloud component using the `renderTooltip` prop. It leverages `@floating-ui/react-dom` for tooltip positioning and styling. The `useTooltip` hook simplifies integration, requiring manual management of tooltip content and floating element refs.

```tsx
import { Word, WordCloud, WordCloudProps, TooltipRendererData, useTooltip } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const MyFloatingTooltip = ({ data }: { data: TooltipRendererData }) => {
  const { refs, floatingStyles } = useTooltip({ data, placement: "top", transform: false });

  return (
    <div
      ref={refs.setFloating}
      style={{
        background: "linear-gradient(135deg, rgba(50,50,50,0.95), rgba(30,30,30,0.95))",
        color: "#fff",
        padding: "10px 16px",
        borderRadius: "8px",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
        transform: "translate(12px, 12px)",
        transition: "all 300ms ease-in-out",
        pointerEvents: "none",
        zIndex: 1000,
        opacity: data.word ? 1 : 0,
        ...floatingStyles,
      }}
    >
      <div style={{ fontWeight: "bold", fontSize: "14px", marginBottom: "4px" }}>
        {data.word?.text}
      </div>

      {data.word && <div style={{ fontSize: "12px", opacity: 0.8 }}>Value: {data.word.value}</div>}
    </div>
  );
};

const tooltipRenderer: WordCloudProps["renderTooltip"] = (data) => (
  <MyFloatingTooltip data={data} />
);

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud
        words={words}
        width={300}
        height={200}
        enableTooltip
        renderTooltip={tooltipRenderer}
      />
    </div>
  );
}

export default App;

```

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

### Basic WordCloud Component Usage in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Demonstrates the fundamental usage of the `WordCloud` component in a React application. It requires importing `Word` and `WordCloud` from the library and providing an array of `Word` objects with text and value properties. The component renders a word cloud within a specified container size.

```tsx
import { Word, WordCloud } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

function App() {
  return (
    <div style={{ width: "400px", height: "400px" }}>
      <WordCloud
        words={words}
        width={300}
        height={200}
        font="Impact"
        spiral="archimedean"
        padding={1}
      />
    </div>
  );
}
```

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

### Animated Word Rendering for WordCloud in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Illustrates how to implement smooth entrance animations for words in the `WordCloud` component using the `AnimatedWordRenderer`. This custom `renderWord` function applies opacity and scale transitions, with an optional `animationDelay` based on the word's index.

```tsx
import {
  Word,
  WordCloud,
  WordCloudProps,
  AnimatedWordRenderer,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "Animation", value: 700 },
  { text: "Smooth", value: 400 },
];

const animatedWordRenderer: WordCloudProps["renderWord"] = (data, ref) => (
  <AnimatedWordRenderer
    ref={ref}
    data={data}
    animationDelay={(_word, index) => index * 50}
    textStyle={{ cursor: "pointer" }}
  />
);

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      renderWord={animatedWordRenderer}
    />
  );
}
```

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

### Custom Styling and Configuration for React Word Cloud

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Illustrates how to customize the appearance and layout of the word cloud by configuring font families, weights, styles, rotation, and spiral algorithms. It uses accessor functions for dynamic styling based on word properties.

```tsx
import {
  Word,
  WordCloud,
  WordCloudProps,
  defaultFontSize,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "Styled", value: 500 },
  { text: "Custom", value: 300 },
  { text: "Fonts", value: 700 },
];

const fonts: string[] = ["Arial", "Courier New", "Georgia"];
const rotationWeights: number[] = [0, 0, 90, 270];

const resolveFont: WordCloudProps["font"] = (_word, index) => {
  return fonts[index % fonts.length];
};

const resolveFontWeight: WordCloudProps["fontWeight"] = (word) => {
  if (word.value < 400) return "normal";
  if (word.value < 700) return "bold";
  return "bolder";
};

const resolveRotate: WordCloudProps["rotate"] = () => {
  return rotationWeights[Math.floor(Math.random() * rotationWeights.length)];
};

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      font={resolveFont}
      fontWeight={resolveFontWeight}
      fontSize={defaultFontSize}
      rotate={resolveRotate}
      fontStyle="normal"
      spiral="rectangular"
      transition="all .3s ease"
      padding={2}
      timeInterval={1}
      random={Math.random}
      svgProps={{
        preserveAspectRatio: "xMidYMid slice",
      }}
    />
  );
}

```

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

### Configure Word Cloud Properties with Props

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Demonstrates how to configure font family, font size, random number generator, and padding by passing props to the WordCloud component. It includes custom functions for resolving font, font weight, and rotation based on word data.

```tsx
import { Word, WordCloud, WordCloudProps, defaultFontSize } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const fonts: string[] = ["Arial", "Courier New", "Cursive"];
const rotationWeights: number[] = [0, 0, 90, 270];

const resolveFont: WordCloudProps["font"] = (_word, index) => {
  return fonts[index % fonts.length];
};

const resolveFontWeight: WordCloudProps["fontWeight"] = (word) => {
  const value = word.value;

  if (value < 400) {
    return "normal";
  } else if (value < 700) {
    return "bold";
  } else {
    return "bolder";
  }
};

const resolveRotate: WordCloudProps["rotate"] = () => {
  return rotationWeights[Math.floor(Math.random() * rotationWeights.length)];
};

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud
        words={words}
        width={300}
        height={200}
        font={resolveFont}
        fontWeight={resolveFontWeight}
        fontSize={defaultFontSize}
        rotate={resolveRotate}
        fontStyle="normal"
        spiral="rectangular"
        transition="all .3s ease"
        padding={2}
        timeInterval={1}
        random={Math.random}
        svgProps={{
          preserveAspectRatio: "xMidYMid slice",
        }}
      />
    </div>
  );
}

export default App;

```

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

### Animated Word Renderer Props

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Props for the animated word renderer. Includes word data, animation delay configuration, text styling, and a ref for interactions.

```typescript
data: WordRendererData
animationDelay: number | (word: Word, index: number) => number
textStyle: React.CSSProperties
ref: React.ForwardedRef<SVGTextElement>
```

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

### Event Handling for React Word Cloud Component

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Demonstrates how to handle various mouse and computation events on words within the React Word Cloud component. Event handlers like `onWordClick`, `onWordMouseOver`, `onWordMouseOut`, `onStartComputation`, `onWordComputed`, and `onCompleteComputation` can be provided to the `WordCloud` component.

```tsx
import { Word, WordCloud, FinalWordData, ComputedWordData } from "@isoterik/react-word-cloud";
import { useCallback } from "react";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

function App() {
  const handleWordClick = useCallback((word: FinalWordData, index: number) => {
    console.log("Clicked on word: ", word.text, index);
  }, []);

  const handleWordMouseOver = useCallback((word: FinalWordData, index: number) => {
    console.log("Mouse over word: ", word.text, index);
  }, []);

  const handleWordMouseOut = useCallback((word: FinalWordData, index: number) => {
    console.log("Mouse out word: ", word.text, index);
  }, []);

  const handleStartComputation = useCallback(() => {
    console.log("Computation started..");
  }, []);

  const handleWordComputed = useCallback((word: ComputedWordData, index: number) => {
    console.log("Computed word: ", word.text, index);
  }, []);

  const handleCompleteComputation = useCallback((words: ComputedWordData[]) => {
    console.log("Computation completed..", words);
  }, []);

  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud
        words={words}
        width={300}
        height={200}
        onWordClick={handleWordClick}
        onWordMouseOver={handleWordMouseOver}
        onWordMouseOut={handleWordMouseOut}
        onStartComputation={handleStartComputation}
        onWordComputed={handleWordComputed}
        onCompleteComputation={handleCompleteComputation}
      />
    </div>
  );
}

export default App;

```

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

### useWordCloud Hook

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Hook for performing layout computations asynchronously, returning computed words and loading state.

```APIDOC
## useWordCloud Hook

### Description
This hook provides a way to perform layout computations asynchronously while retaining full control over the rendered SVG. It returns an object containing the computed words and other useful data. It computes and returns the words based on the provided parameters and the layout algorithm.

### Parameters
The parameters of the `useWordCloud` hook are the same as the props of the `WordCloud` component excluding the `containerStyle`, `enableTooltip`, `renderTooltip`, `renderWord`, `onWordClick`, `onWordMouseOver`, and `onWordMouseOut` props.

### Return Value
The return value of the `useWordCloud` hook is an object containing the computed words and the loading state of the layout computation:

- **computedWords** (`ComputedWordData[]`) - An array of computed word data representing the words in the word cloud. Each computed word object contains information about the word's text, value, fill color, font family, font size, font weight, rotation angle, and other properties.
- **isLoading** (`boolean`) - A boolean value indicating whether the layout computation is in progress. When set to `true`, the layout computation is still running, and **all** the computed words are not yet available.
```

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

### WordCloud with Gradients in React

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Shows how to apply linear and radial gradients to word fills in the `WordCloud` component. This involves defining `Gradient` objects with unique IDs, types, and color stops, and then providing a `fill` function to the `WordCloud` component to reference these gradients by URL.

```tsx
import { Gradient, Word, WordCloud, WordCloudProps } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "TypeScript", value: 600 },
  { text: "D3", value: 1000 },
];

const gradients: Gradient[] = [
  {
    id: "gradient1",
    type: "linear",
    angle: 45,
    stops: [
      { offset: "0%", color: "#ff7e5f" },
      { offset: "100%", color: "#feb47b" },
    ],
  },
  {
    id: "gradient2",
    type: "radial",
    stops: [
      { offset: "0%", color: "#6a11cb" },
      { offset: "100%", color: "#2575fc" },
    ],
  },
];

const resolveFill: WordCloudProps["fill"] = (_word, index) => {
  return index % 2 === 0 ? "url(#gradient1)" : "url(#gradient2)";
};

function App() {
  return (
    <WordCloud
      words={words}
      width={300}
      height={200}
      gradients={gradients}
      fill={resolveFill}
    />
  );
}
```

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

### Custom Tooltip Rendering Function

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines a function to render custom tooltips for words in the word cloud. It accepts tooltip data and should return a React node. The default renderer is `<DefaultTooltipRenderer />`.

```typescript
renderTooltip: (data: TooltipRendererData) => React.ReactNode
```

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

### Default Word Renderer Props

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Props for the default word renderer component. Includes the word's data, text styling, and a ref for event handling.

```typescript
data: WordRendererData
textStyle: React.CSSProperties
ref: React.ForwardedRef<SVGTextElement>
```

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

### Compute Word Layouts with useWordCloud Hook

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

The low-level `useWordCloud` hook computes word positions and loading state for custom SVG rendering. It requires an array of `Word` objects and configuration options for dimensions, fonts, and callbacks. The hook returns `computedWords` and `isLoading` state.

```tsx
import {
  defaultFill,
  defaultFontSize,
  useWordCloud,
  Word,
  WordCloudProps,
} from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "Hook", value: 500 },
  { text: "Custom", value: 300 },
  { text: "Render", value: 700 },
];

const WIDTH = 300;
const HEIGHT = 200;

const resolveFont: WordCloudProps["font"] = (_word, index) => {
  return ["Arial", "Georgia"][index % 2];
};

function App() {
  const { computedWords, isLoading } = useWordCloud({
    words,
    width: WIDTH,
    height: HEIGHT,
    font: resolveFont,
    fontWeight: "normal",
    fontSize: defaultFontSize,
    rotate: () => (Math.random() > 0.5 ? 0 : 90),
    fontStyle: "normal",
    spiral: "rectangular",
    padding: 2,
    timeInterval: 1,
    onStartComputation: () => console.log("Started"),
    onWordComputed: (word, index) => console.log(`Word ${index}: ${word.text}`),
    onCompleteComputation: (words) => console.log("Done:", words.length),
  });

  if (isLoading) {
    return <div>Computing layout...</div>;
  }

  return (
    <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`}>
      <g transform={`translate(${WIDTH / 2},${HEIGHT / 2})`}>
        {computedWords.map((word, index) => (
          <text
            key={index}
            textAnchor="middle"
            transform={`translate(${word.x}, ${word.y}) rotate(${word.rotate})`}
            style={{
              fontSize: word.size,
              fontFamily: word.font,
              fontWeight: word.weight,
              fill: typeof defaultFill === "function"
                ? defaultFill(word, index)
                : defaultFill,
              transition: "all 0.3s ease",
            }}
          >
            {word.text}
          </text>
        ))}
      </g>
    </svg>
  );
}

```

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

### Use useWordCloud Hook for Asynchronous Layout

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Utilizes the useWordCloud hook to manage layout computations asynchronously, providing full control over word rendering and SVG structure. This hook accepts similar props to the WordCloud component, including `timeInterval` for controlling computation duration.

```tsx
import { defaultFill, defaultFontSize, useWordCloud, Word, WordCloudProps } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const fonts: string[] = ["Arial", "Courier New", "Cursive"];
const rotationWeights: number[] = [0, 0, 90, 270];

const resolveFont: WordCloudProps["font"] = (_word, index) => {
  return fonts[index % fonts.length];
};

const resolveFontWeight: WordCloudProps["fontWeight"] = (word) => {
  const value = word.value;

  if (value < 400) {
    return "normal";
  } else if (value < 700) {
    return "bold";
  } else {
    return "bolder";
  }
};

const resolveRotate: WordCloudProps["rotate"] = () => {
  return rotationWeights[Math.floor(Math.random() * rotationWeights.length)];
};

const WIDTH = 300;
const HEIGHT = 200;

function App() {
  const { computedWords } = useWordCloud({
    words,
    width: WIDTH,
    height: HEIGHT,
    font: resolveFont,
    fontWeight: resolveFontWeight,
    fontSize: defaultFontSize,
    rotate: resolveRotate,
    fontStyle: "normal",
    spiral: "rectangular",
    padding: 2,
    timeInterval: 1,
  });

  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`}>
        <g transform={`translate(${WIDTH / 2},${HEIGHT / 2})`}>
          {computedWords.map((word, index) => (
            <text
              key={index}
              textAnchor="middle"
              transform={`translate(${word.x}, ${word.y}) rotate(${word.rotate})`}
              style={{
                fontSize: word.size,
                fontFamily: word.font,
                fontWeight: word.weight,
                fill: typeof defaultFill === "function" ? defaultFill(word, index) : defaultFill,
                transform: `translate(${word.x}, ${word.y}) rotate(${word.rotate})`,
                transition: "all 0.3s ease",
              }}
            >
              {word.text}
            </text>
          ))}
        </g>
      </svg>
    </div>
  );
}

export default App;

```

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

### Word Click Event Handler

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A callback function executed when a word in the word cloud is clicked. It receives the word's data and index. For custom renderers, manual invocation of the callback is necessary.

```typescript
onWordClick: (word: FinalWordData, index: number, event: React.MouseEvent<SVGTextElement, MouseEvent>) => void
```

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

### WordCloud Component Props

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Props available for the WordCloud component, controlling its appearance and behavior.

```APIDOC
## WordCloud Component Props

### Description
Props available for the WordCloud component, controlling its appearance and behavior.

### Parameters
#### Props
- **data*** (`TooltipRendererData`) - The data object containing information about the word for which the tooltip is being rendered. This object includes the word's text, value, fill color, font family, font size, font weight, rotation angle, the underlying SVG element, layout size, and other properties.
- **transitionDuration** (`number`) - The duration (in milliseconds) of the tooltip transition animation. Default: `300`
- **containerStyle** (`React.CSSProperties`) - The style object to be applied to the container element of the tooltip. This is useful for customizing the styles of the tooltip container.
- **textStyle** (`React.CSSProperties`) - The style object to be applied to the text element of the tooltip. This is useful for customizing the styles of the tooltip text.
- **valueStyle** (`React.CSSProperties`) - The style object to be applied to the value element of the tooltip. This is useful for customizing the styles of the tooltip value.
```

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

### Apply Gradients to Word Cloud in React

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

This snippet shows how to apply linear and radial gradients to words in a React word cloud. It defines gradient configurations and a resolver function to assign gradients to words based on their index. Dependencies include @isoterik/react-word-cloud.

```tsx
import { Gradient, Word, WordCloud, WordCloudProps } from "@isoterik/react-word-cloud";

const words: Word[] = [
  { text: "React", value: 500 },
  { text: "WordCloud", value: 300 },
  { text: "D3", value: 1000 },
  { text: "JavaScript", value: 400 },
  { text: "TypeScript", value: 600 },
  { text: "Word", value: 800 },
  { text: "Cloud", value: 200 },
];

const gradients: Gradient[] = [
  {
    id: "gradient1",
    type: "linear",
    angle: 45, // in degrees
    stops: [
      { offset: "0%", color: "#ff7e5f" },
      { offset: "100%", color: "#feb47b" },
    ],
  },
  {
    id: "gradient2",
    type: "radial",
    stops: [
      { offset: "0%", color: "#6a11cb" },
      { offset: "100%", color: "#2575fc" },
    ],
  },
];

const resolveFill: WordCloudProps["fill"] = (_word, index) => {
  return index % 2 === 0 ? "url(#gradient1)" : "url(#gradient2)";
};

function App() {
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
      }}
    >
      <WordCloud words={words} width={300} height={200} gradients={gradients} fill={resolveFill} />
    </div>
  );
}

export default App;
```

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

### Word Mouse Over Event Handler

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A callback function triggered when the mouse pointer hovers over a word. It provides the word's data and index. Custom renderers require manual callback invocation.

```typescript
onWordMouseOver: (word: FinalWordData, index: number, event: React.MouseEvent<SVGTextElement, MouseEvent>) => void
```

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

### Gradient Definition for Word Cloud Fills

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Specifies the structure for gradient definitions used in word cloud fills. Gradients are applied when the 'fill' prop is a function returning a gradient ID. Each gradient requires an 'id', 'type' (linear or radial), and an array of 'stops'.

```typescript
interface GradientStop {
  offset: string | number;
  color: string;
}

interface Gradient {
  id: string;
  type: 'linear' | 'radial';
  stops: GradientStop[];
}
```

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

### Word Type

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines the structure of a word object for the word cloud.

```APIDOC
## Word Type

### Description
A type representing a word object to be displayed in the word cloud.

### Properties
- **text*** (`string`) - The text of the word to be displayed.
- **value*** (`number`) - The value of the word representing its weight. Words with higher values are more important and will be considered before words with lower values during layout computations.
```

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

### GradientStop Type

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines the structure of a gradient stop object.

```APIDOC
## GradientStop Type

### Description
A type representing a gradient stop object to be used for rendering words in the word cloud.

### Properties
- **offset*** (`string`) - The offset of the gradient stop. This value should be a percentage string representing the position of the stop along the gradient.
- **color*** (`string`) - The color of the gradient stop. This value should be a valid CSS color string.
```

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

### Layout Computation Complete Event

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A function called once the entire word cloud layout computation is finished. It receives an array of all computed word data, suitable for post-computation actions.

```typescript
onCompleteComputation: (words: ComputedWordData[]) => void
```

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

### Word Computation Progress Event

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A callback function executed for each word as its layout is computed. It receives the computed word data and its index, aiding in progress tracking or incremental rendering.

```typescript
onWordComputed: (word: ComputedWordData, index: number) => void
```

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

### Word Data Structure for React Word Cloud

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines the structure for individual words in the word cloud. Each word requires a 'text' property for display and a 'value' property to determine its importance and size within the cloud. Higher values lead to words being prioritized in layout calculations.

```typescript
interface Word {
  text: string;
  value: number;
}
```

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

### Custom Word Rendering Function

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines a function to render custom word components in the word cloud. It receives word data and an optional ref, returning a React node. The default is `<DefaultWordRenderer />`.

```typescript
renderWord: (data: WordRendererData, ref?: Ref<SVGTextElement>) => React.ReactNode
```

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

### Gradient Type

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines the structure of a gradient object for rendering words.

```APIDOC
## Gradient Type

### Description
A type representing a gradient object to be used for rendering words in the word cloud.

### Properties
- **id*** (`string`) - The ID of the gradient.
- **type*** (`"linear" | "radial"`) - The type of the gradient (`linear` or `radial`).
- **angle** (`number`) - The angle of the gradient in degrees. This property is only applicable for linear gradients.
- **stops*** (`GradientStop[]`) - An array of gradient stop objects representing the color stops of the gradient.
```

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

### Word Mouse Out Event Handler

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

A callback function invoked when the mouse pointer leaves a word. It receives the word's data and index. Manual invocation is needed for custom renderers.

```typescript
onWordMouseOut: (word: FinalWordData, index: number, event: React.MouseEvent<SVGTextElement, MouseEvent>) => void
```

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

### ComputedWordData Type

Source: https://github.com/isoteriksoftware/react-word-cloud/blob/main/README.md

Defines the structure of computed word data after layout calculation.

```APIDOC
## ComputedWordData Type

### Description
A type representing the computed data of a word in the word cloud layout.

### Properties
- **text** (`string`) - The text of the word.
- **value** (`number`) - The value (weight) of the word.
- **fill** (`string`) - The fill color of the word.
- **fontFamily** (`string`) - The font family of the word.
- **fontSize** (`number`) - The font size of the word.
- **fontWeight** (`number` | `string`) - The font weight of the word.
- **angle** (`number`) - The rotation angle of the word.
- **x** (`number`) - The x-coordinate of the word's position.
- **y** (`number`) - The y-coordinate of the word's position.
- **width** (`number`) - The width of the word.
- **height** (`number`) - The height of the word.
- **element** (`SVGElement`) - The underlying SVG element for the word.
- **layoutSize** (`{ width: number, height: number }`) - The size of the layout.
```

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

### TypeScript Type Definitions for Word Cloud

Source: https://context7.com/isoteriksoftware/react-word-cloud/llms.txt

Key TypeScript types are exported to facilitate type-safe development with the React Word Cloud library. These include types for input words, computed data, gradients, and component properties.

```tsx
import {
  Word,
  ComputedWordData,
  FinalWordData,
  WordRendererData,
  TooltipRendererData,
  Gradient,
  GradientStop,
  WordCloudProps,
} from "@isoterik/react-word-cloud";

// Word: Basic word input
const word: Word = {
  text: "Example",
  value: 100,
};

// Gradient: Define color gradients
const gradient: Gradient = {
  id: "myGradient",
  type: "linear",
  angle: 45,
  stops: [
    { offset: "0%", color: "#ff0000" },
    { offset: "100%", color: "#0000ff" },
  ],
};

// GradientStop: Individual gradient color stop
const stop: GradientStop = {
  offset: "50%",
  color: "#00ff00",
};

```

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