### Performance Tuning Props Examples

Source: https://context7.com/molefrog/spoiled/llms.txt

Illustrates how to use performance tuning props like `fps`, `density`, and `gap` to adjust animation smoothness and appearance.

```APIDOC
## Performance Tuning Props

### Low-Power Mode
```tsx
<Spoiler fps={12} density={0.07}>
  Battery-friendly spoiler
</Spoiler>
```

### High-Density Effect
```tsx
<Spoiler density={0.35} fps={30}>
  Very opaque noise
</Spoiler>
```

### Disable Gap
```tsx
<Spoiler gap={false}>No edge gap</Spoiler>
```

### Custom Gap
```tsx
<Spoiler gap={12}>12px clear border around noise</Spoiler>
```

### Disable Word-Gap Mimicry
```tsx
<Spoiler mimicWords={false}>
  Rendered as solid line boxes, no word spacing simulation
</Spoiler>
```

**Note:** `prefers-reduced-motion` is respected automatically, setting `fps` to 0 internally to freeze the animation.
```

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

### Install Spoiler Component

Source: https://context7.com/molefrog/spoiled/llms.txt

Install the spoiled package using yarn.

```bash
yarn add spoiled
```

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

### Theming and Accent Color Examples

Source: https://context7.com/molefrog/spoiled/llms.txt

Demonstrates how to customize the theme and accent color of the Spoiler component for different visual appearances.

```APIDOC
## Theming and Accent Color

### System Theme (Default)
```tsx
<Spoiler>System-aware spoiler</Spoiler>
```

### Force Dark Noise
```tsx
<Spoiler theme="dark">Always dark</Spoiler>
```

### Force Light Noise
```tsx
<Spoiler theme="light">Always light</Spoiler>
```

### Single Accent Color
```tsx
<Spoiler accentColor="#ef4444">Red noise</Spoiler>
```

### Separate Colors for Light and Dark Themes
```tsx
<Spoiler accentColor={["#1e40af", "#bfdbfe"]}>
  Blue — darker in light mode, lighter in dark mode
</Spoiler>
```
```

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

### Install Spoiled React Component

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Install the package using npm, pnpm, or yarn. Requires React 18.

```jsx
npm i spoiled
```

```jsx
pnpm add spoiled
```

```jsx
yarn add spoiled
```

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

### Spoiler Performance Tuning Examples

Source: https://context7.com/molefrog/spoiled/llms.txt

Illustrates how to tune the performance of the Spoiler component using props like 'fps', 'density', and 'gap'. These props control animation smoothness, particle density, and edge padding, with 'mimicWords' affecting word-shape simulation.

```tsx
import { Spoiler } from "spoiled";

// Low-power mode: fewer fps, lower density
<Spoiler fps={12} density={0.07}>
  Battery-friendly spoiler
</Spoiler>

// High-density dramatic effect
<Spoiler density={0.35} fps={30}>
  Very opaque noise
</Spoiler>

// Disable gap (particles fill all the way to the edge)
<Spoiler gap={false}>No edge gap</Spoiler>

// Custom gap in pixels
<Spoiler gap={12}>12px clear border around noise</Spoiler>

// Disable word-gap mimicry (Houdini path only)
<Spoiler mimicWords={false}>
  Rendered as solid line boxes, no word spacing simulation
</Spoiler>

// prefers-reduced-motion is respected automatically:
// fps is set to 0 internally, freezing the animation

```

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

### Basic Spoiler Usage (Uncontrolled, Hover Reveal)

Source: https://context7.com/molefrog/spoiled/llms.txt

Use this for a simple, self-managed spoiler that reveals its content on hover. No additional setup is required beyond importing the component.

```tsx
import { Spoiler } from "spoiled";
// or, without auto-injected CSS:
// import { Spoiler } from "spoiled/no-css";
// import "spoiled/style.css"; // load separately in your bundler

// --- Minimal usage (uncontrolled, reveals on hover) ---
<Spoiler>The butler did it.</Spoiler>
```

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

### Spoiler Theming and Accent Color Examples

Source: https://context7.com/molefrog/spoiled/llms.txt

Demonstrates how to control the visual theme and accent color of the Spoiler component. The 'theme' prop accepts 'system', 'light', or 'dark', while 'accentColor' can be a single color or a tuple for light/dark themes.

```tsx
import { Spoiler } from "spoiled";

// System theme (default)
<Spoiler>System-aware spoiler</Spoiler>

// Force dark noise
<Spoiler theme="dark">Always dark</Spoiler>

// Force light noise
<Spoiler theme="light">Always light</Spoiler>

// Single accent color (same in both themes)
<Spoiler accentColor="#ef4444">Red noise</Spoiler>

// Separate colors for light and dark themes
<Spoiler accentColor={["#1e40af", "#bfdbfe"]}>
  Blue — darker in light mode, lighter in dark mode
</Spoiler>
```

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

### Spoiler Component Full Prop Reference

Source: https://context7.com/molefrog/spoiled/llms.txt

This snippet shows the complete set of props for the Spoiler component, including visibility control, element customization, transition effects, noise appearance, performance tuning, and fallback options. It also includes an example of a controlled state with theming and performance adjustments.

```tsx
import { Spoiler, type SpoilerProps } from "spoiled";

const props: SpoilerProps = {
  // ── Visibility control ──────────────────────────────────────────────────
  hidden: true,                // controlled: true = hidden, false = revealed
  defaultHidden: true,         // uncontrolled initial state (default: true)
  revealOn: "hover",           // "click" | "hover" | false  (default: "hover" when uncontrolled)
  onHiddenChange: (v) => {},   // fires whenever hidden state changes

  // ── Element ─────────────────────────────────────────────────────────────
  tagName: "span",             // any intrinsic HTML tag (default: "span")
  asChild: false,              // merge onto single child element instead of wrapping

  // ── Content reveal transition ────────────────────────────────────────────
  transition: "iris",          // "iris" | "fade" | "none" | false  (default: "iris")
                               // false / "none" = no transition wrapper injected

  // ── Noise appearance ─────────────────────────────────────────────────────
  theme: "system",             // "system" | "light" | "dark"  (default: "system")
  accentColor: "#3b82f6",      // primary noise color; or [lightColor, darkColor] tuple
  // accentColor: ["#1e3a5f", "#93c5fd"],

  // ── Performance ──────────────────────────────────────────────────────────
  fps: 24,                     // animation frames-per-second (default: 24)
  density: 0.12,               // particle density 0–1 (default: 0.12)
  gap: 6,                      // particle-free border in px, or false to disable (default: 6)
  mimicWords: true,            // Houdini only: fake inter-word gaps (default: true)
  noiseFadeDuration: 1.5,      // seconds for the noise to fade in/out (default: 1.5)

  // ── Fallback (non-Houdini browsers) ─────────────────────────────────────
  fallback: "repeat top left / 16px 16px url(/pattern.png)",
                               // CSS background value for static fallback; false = none
  forceFallback: false,        // always use canvas fallback even in Houdini browsers
};

// Full example combining performance + theming + controlled state
function MyComponent() {
  const [hidden, setHidden] = useState(true);

  return (
    <Spoiler
      hidden={hidden}
      onClick={() => setHidden((s) => !s)}
      theme="dark"
      accentColor={["#1d4ed8", "#93c5fd"]}
      fps={16}
      density={0.18}
      transition="fade"
      noiseFadeDuration={0.8}
      tagName="p"
      className="spoiler-paragraph"
    >
      The treasure is buried under the old oak tree.
    </Spoiler>
  );
}

```

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

### CSS-Only Import

Source: https://context7.com/molefrog/spoiled/llms.txt

Instructions on how to import the Spoiler component's CSS separately using the unstyled entry point and a bundler.

```APIDOC
## CSS-Only Import (`spoiled/no-css` + `spoiled/style.css`)

By default `spoiled` injects a `<style>` tag at runtime. Use the unstyled entry point and import the CSS through your bundler instead.

```tsx
// Instead of:
import { Spoiler } from "spoiled";

// Use the unstyled build:
import { Spoiler } from "spoiled/no-css";

// And load the styles through your bundler (Vite, webpack, etc.)
// so they end up in the final CSS bundle:
import "spoiled/style.css";

// Usage is identical — only the style injection mechanism changes
function App() {
  return (
    <Spoiler revealOn="click">
      No runtime style injection
    </Spoiler>
  );
}
```
```

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

### CSS-Only Import for Spoiler

Source: https://context7.com/molefrog/spoiled/llms.txt

Use the unstyled entry point (`spoiled/no-css`) and import the CSS separately via your bundler to avoid runtime style injection.

```tsx
// Instead of:
import { Spoiler } from "spoiled";

// Use the unstyled build:
import { Spoiler } from "spoiled/no-css";

// And load the styles through your bundler (Vite, webpack, etc.)
// so they end up in the final CSS bundle:
import "spoiled/style.css";

// Usage is identical — only the style injection mechanism changes
function App() {
  return (
    <Spoiler revealOn="click">
      No runtime style injection
    </Spoiler>
  );
}
```

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

### SpoilerPainter - Imperative API

Source: https://context7.com/molefrog/spoiled/llms.txt

The imperative low-level API for direct control over the noise painter, intended for advanced use cases.

```APIDOC
## `SpoilerPainter` — Imperative Low-Level API

The class that drives the animation. Exported for advanced use cases where you need direct control over the noise painter without the React component layer.

```ts
import { SpoilerPainter, isCSSHoudiniSupported } from "spoiled/no-css";

const el = document.getElementById("my-element") as HTMLElement;

// Instantiate — begins painting immediately in hidden state
const painter = new SpoilerPainter(el, {
  fps: 24,          // frames per second
  density: 0.12,    // particle density
  gap: 6,           // edge gap in px
  mimicWords: true, // Houdini: mimic word shapes
  accentColor: "#333",
  fallback: "black", // CSS background for static fallback
  forceFallback: false,
});

// Check Houdini support
console.log(isCSSHoudiniSupported); // true in Chrome/Edge, false in Firefox/Safari

// Hide with animated noise fade-in (default: animated)
painter.hide();                        // default: animate = true (1.5s fade)
painter.hide({ animate: false });      // instant
painter.hide({ animate: 2.0 });        // 2-second fade

// Reveal content with noise fade-out
painter.reveal();                      // animated (default)
painter.reveal({ animate: false });    // instant
painter.reveal({ animate: 0.5 });      // 0.5-second fade

// Check current state
console.log(painter.isHidden);    // boolean
console.log(painter.isAnimating); // boolean
console.log(painter.t);           // current animation clock (seconds)

// Update options dynamically (safe to call at any time)
painter.update({
  fps: 16,
  density: 0.2,
  accentColor: "#ef4444",
});

// Stop animation loop (pauses rendering, preserves state)
painter.stopAnimation();

// Resume animation loop
painter.startAnimation();

// Fully tear down: removes CSS custom properties, disconnects observers
painter.destroy();
// painter.update(...) after destroy() throws:
// Error: "Painter has been destroyed and can't be used again."
```
```

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

### Package.json Exports Map

Source: https://context7.com/molefrog/spoiled/llms.txt

Defines the export map for the spoiled package, specifying different entry points for components and styles.

```jsonc
// package.json exports map
{
  "spoiled":          // default — Spoiler component with auto-injected styles
  "spoiled/no-css":   // Spoiler + SpoilerPainter, no runtime style injection
  "spoiled/style.css" // raw CSS for manual import via bundler
}
```

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

### Theming Spoiler Component

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Override the default 'system' theme with 'dark' or 'light'. The `accentColor` prop allows customization of the noise color, accepting a single color or an array for dynamic light/dark themes.

```jsx
/**
 * Theming
 */

<Spoiler /> // default theme is `system`
<Spoiler theme="dark" />
<Spoiler theme="light" />

/**
 * Custom primary color of the noise
 */

<Spoiler accentColor="red" />

// use an array of light and dark colors for
// dynamic accent color
<Spoiler accentColor={["black", "white"]} />
```

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

### Import Spoiler Component and Types

Source: https://context7.com/molefrog/spoiled/llms.txt

Import the Spoiler component, SpoilerPainter, and related types from the default entry point in TypeScript.

```tsx
// TypeScript: all types are exported from the default entry point
import { Spoiler, SpoilerPainter, type SpoilerProps } from "spoiled";
import { isCSSHoudiniSupported } from "spoiled/no-css";
```

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

### Basic Spoiler Usage

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Wrap your text content within the Spoiler component to hide it. By default, it reveals on hover and uses the system color scheme.

```jsx
import { Spoiler } from "spoiled";

// Reveals on hover
<Spoiler>
  Hogwarts is a high-tech <b>startup incubator</b>
</Spoiler>;
```

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

### Using Spoiler Without Default CSS

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Import the unstyled version of Spoiler and manually include the necessary CSS for transitions if you prefer to manage styles separately. This is useful with bundlers like Vite.

```jsx
import { Spoiler } from "spoiled/no-css";

// If you're using Vite or similar bundler, these styles will be written to the final CSS bundle
import "spoiled/style.css";
```

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

### SpoilerPainter Imperative API

Source: https://context7.com/molefrog/spoiled/llms.txt

Control the noise painter directly using the `SpoilerPainter` class for advanced use cases. It allows imperative control over hiding, revealing, and updating painter options.

```ts
import { SpoilerPainter, isCSSHoudiniSupported } from "spoiled/no-css";

const el = document.getElementById("my-element") as HTMLElement;

// Instantiate — begins painting immediately in hidden state
const painter = new SpoilerPainter(el, {
  fps: 24,          // frames per second
  density: 0.12,    // particle density
  gap: 6,           // edge gap in px
  mimicWords: true, // Houdini: mimic word shapes
  accentColor: "#333",
  fallback: "black", // CSS background for static fallback
  forceFallback: false,
});

// Check Houdini support
console.log(isCSSHoudiniSupported); // true in Chrome/Edge, false in Firefox/Safari

// Hide with animated noise fade-in (default: animated)
painter.hide();                        // default: animate = true (1.5s fade)
painter.hide({ animate: false });      // instant
painter.hide({ animate: 2.0 });        // 2-second fade

// Reveal content with noise fade-out
painter.reveal();                      // animated (default)
painter.reveal({ animate: false });    // instant
painter.reveal({ animate: 0.5 });      // 0.5-second fade

// Check current state
console.log(painter.isHidden);    // boolean
console.log(painter.isAnimating); // boolean
console.log(painter.t);           // current animation clock (seconds)

// Update options dynamically (safe to call at any time)
painter.update({
  fps: 16,
  density: 0.2,
  accentColor: "#ef4444",
});

// Stop animation loop (pauses rendering, preserves state)
painter.stopAnimation();

// Resume animation loop
painter.startAnimation();

// Fully tear down: removes CSS custom properties, disconnects observers
painter.destroy();
// painter.update(...) after destroy() throws:
// Error: "Painter has been destroyed and can't be used again."
```

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

### Spoiler Component Transition Modes

Source: https://context7.com/molefrog/spoiled/llms.txt

Controls how hidden content animates into view when the spoiler is revealed using the 'transition' prop.

```APIDOC
## Spoiler Component Transition Modes (`transition` prop)

Controls how hidden content animates into view when the spoiler is revealed.

```tsx
import { Spoiler } from "spoiled";

// Default: iris (radial reveal mask + fade)
<Spoiler transition="iris">Dramatic radial reveal</Spoiler>

// Fade in/out via opacity + blur
<Spoiler transition="fade">Soft fade-in reveal</Spoiler>

// No transition: content appears/disappears instantly
<Spoiler transition="none">Instant reveal</Spoiler>

// Disable transition wrapper entirely (slightly less DOM overhead)
<Spoiler transition={false}>No transition element</Spoiler>

// Customize how long the noise fades out when revealing
<Spoiler noiseFadeDuration={0.4} transition="fade">
  Fast noise fade-out (0.4s)
</Spoiler>

// Instant reveal with no noise fade
<Spoiler noiseFadeDuration={0} transition={false}>
  Snap to revealed
</Spoiler>
```
```

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

### Spoiler Component Fallback Modes

Source: https://context7.com/molefrog/spoiled/llms.txt

Provides fallback mechanisms for browsers without CSS Houdini support, allowing customization of static fallback images.

```APIDOC
## Fallback Mode (Non-Houdini Browsers)

For browsers without CSS Houdini (Firefox, Safari), `spoiled` overlays animated `<canvas>` elements. Customize the static fallback image for environments where canvas is also unavailable.

```tsx
import { Spoiler } from "spoiled";

// Default: animated canvas fallback auto-applied in Firefox/Safari

// Custom static CSS background as last-resort fallback
<Spoiler fallback="repeat top left / 16px 16px url('/noise-pattern.png')">
  Falls back to a tiled PNG if canvas unavailable
</Spoiler>

// Disable static fallback entirely (content hidden only via CSS color: transparent)
<Spoiler fallback={false}>No static fallback</Spoiler>

// Force canvas path even in Houdini-capable browsers (useful for testing)
<Spoiler forceFallback={true}>Always canvas</Spoiler>

// forceFallback + custom fallback image
<Spoiler forceFallback={true} fallback="center / cover url('/static-noise.webp')">
  Force static image
</Spoiler>
```
```

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

### Spoiler Initially Visible (Uncontrolled)

Source: https://context7.com/molefrog/spoiled/llms.txt

Set the spoiler to be visible by default. The content will be hidden only after the user interacts with it (e.g., clicks it).

```tsx
// --- Start already revealed (uncontrolled) ---
<Spoiler defaultHidden={false} revealOn="click">
  Initially visible, click to hide
</Spoiler>
```

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

### Spoiler Fallback Modes

Source: https://context7.com/molefrog/spoiled/llms.txt

Customize fallback behavior for browsers without CSS Houdini support. Use a static image or disable fallbacks entirely.

```tsx
import { Spoiler } from "spoiled";

// Default: animated canvas fallback auto-applied in Firefox/Safari

// Custom static CSS background as last-resort fallback
<Spoiler fallback="repeat top left / 16px 16px url('/noise-pattern.png')">
  Falls back to a tiled PNG if canvas unavailable
</Spoiler>

// Disable static fallback entirely (content hidden only via CSS color: transparent)
<Spoiler fallback={false}>No static fallback</Spoiler>

// Force canvas path even in Houdini-capable browsers (useful for testing)
<Spoiler forceFallback={true}>Always canvas</Spoiler>

// forceFallback + custom fallback image
<Spoiler forceFallback={true} fallback="center / cover url('/static-noise.webp')">
  Force static image
</Spoiler>
```

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

### Spoiler Transition Modes

Source: https://context7.com/molefrog/spoiled/llms.txt

Control how hidden content animates into view using the `transition` prop. Options include 'iris', 'fade', 'none', or `false` to disable transitions.

```tsx
import { Spoiler } from "spoiled";

// Default: iris (radial reveal mask + fade)
<Spoiler transition="iris">Dramatic radial reveal</Spoiler>

// Fade in/out via opacity + blur
<Spoiler transition="fade">Soft fade-in reveal</Spoiler>

// No transition: content appears/disappears instantly
<Spoiler transition="none">Instant reveal</Spoiler>

// Disable transition wrapper entirely (slightly less DOM overhead)
<Spoiler transition={false}>No transition element</Spoiler>

// Customize how long the noise fades out when revealing
<Spoiler noiseFadeDuration={0.4} transition="fade">
  Fast noise fade-out (0.4s)
</Spoiler>

// Instant reveal with no noise fade
<Spoiler noiseFadeDuration={0} transition={false}>
  Snap to revealed
</Spoiler>
```

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

### Spoiler Component Props Reference

Source: https://context7.com/molefrog/spoiled/llms.txt

This section provides a comprehensive reference for all props accepted by the Spoiler component, including inherited props from the underlying span element.

```APIDOC
## Spoiler Component Props

### Visibility Control
- **hidden** (boolean): Controlled visibility. `true` hides the content, `false` reveals it.
- **defaultHidden** (boolean): Uncontrolled initial state. Defaults to `true`.
- **revealOn** ("click" | "hover" | false): Determines how content is revealed. Defaults to `"hover"` when uncontrolled.
- **onHiddenChange** ((v: boolean) => void): Callback function that fires whenever the hidden state changes.

### Element Customization
- **tagName** (string): Specifies the intrinsic HTML tag to use for the component. Defaults to `"span"`.
- **asChild** (boolean): If `true`, merges props onto a single child element instead of wrapping it. Defaults to `false`.

### Content Reveal Transition
- **transition** ("iris" | "fade" | "none" | false): The type of transition effect for content reveal. `false` or `"none"` disables transitions. Defaults to `"iris"`.

### Noise Appearance
- **theme** ("system" | "light" | "dark"): Controls the noise appearance theme. Defaults to `"system"`.
- **accentColor** (string | [string, string]): Sets the primary noise color. Can be a single color string or a tuple of `[lightColor, darkColor]`.

### Performance Tuning
- **fps** (number): Animation frames per second. Defaults to `24`.
- **density** (number): Particle density, ranging from 0 to 1. Defaults to `0.12`.
- **gap** (number | false): The particle-free border in pixels. Set to `false` to disable. Defaults to `6`.
- **mimicWords** (boolean): Houdini only: Fakes inter-word gaps. Defaults to `true`.
- **noiseFadeDuration** (number): Duration in seconds for the noise to fade in/out. Defaults to `1.5`.

### Fallback (non-Houdini browsers)
- **fallback** (string | false): CSS background value for static fallback. Set to `false` for no static fallback.
- **forceFallback** (boolean): If `true`, always uses the canvas fallback even in Houdini browsers. Defaults to `false`.
```

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

### Controlling Spoiler Reveal Behavior

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Use the `revealOn` prop to specify whether the spoiler should reveal on 'click' or 'hover'. The `defaultHidden` prop controls the initial state when `revealOn` is set to 'click'.

```jsx
<Spoiler revealOn="click">Click me</Spoiler>;
<Spoiler revealOn="hover">Hover me</Spoiler>;

// Click to hide the spoiler
<Spoiler defaultHidden={false} revealOn="click">
  Frodo starts a ring-themed jewelry line
</Spoiler>;
```

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

### Spoiler Component Usage with Accessibility Attributes

Source: https://context7.com/molefrog/spoiled/llms.txt

Demonstrates how to use the Spoiler component with ARIA labels for screen readers. The component automatically manages aria-expanded and data-hidden attributes.

```tsx
import { Spoiler } from "spoiled";

// aria-expanded="false" when hidden, "true" when revealed
// data-hidden="true" attribute present while hidden (useful for CSS selectors)

<Spoiler
  aria-label="Spoiler: movie plot twist"
  revealOn="click"
>
  Tyler Durden is the narrator's alter ego.
</Spoiler>

// Styling hook via data-hidden attribute:
// .spoiler[data-hidden="true"] { cursor: pointer; }
```

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

### Controlled Spoiler with onHiddenChange Callback

Source: https://context7.com/molefrog/spoiled/llms.txt

Use the `onHiddenChange` callback to be notified when the spoiler's hidden state changes. This allows for external state management and logging.

```tsx
// --- Controlled with onHiddenChange callback ---
<Spoiler
  hidden={hidden}
  onHiddenChange={(nextHidden) => {
    console.log("Spoiler is now:", nextHidden ? "hidden" : "revealed");
    setHidden(nextHidden);
  }}>
  Secret content
</Spoiler>
```

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

### Optimizing Spoiler Performance

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Control animation performance using `fps` (frames per second) and `density` (particle count). The component automatically pauses animation when out of viewport using IntersectionObserver.

```jsx
// default FPS is 24, but it should look good at 16-20 as well
<Spoiler fps={16} />

// Default: 0.12
// Controls the number of particles rendered
// The higher, the more dense the noise
<Spoiler density={0.2}>Fat secret</Spoiler>
```

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

### Customizing Spoiler Tag and Attributes

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Use the `tagName` prop to change the underlying HTML element (e.g., 'div' for blocks). Standard HTML attributes like `className` and `aria-label` are proxied.

```jsx
<Spoiler className="custom" aria-label="total secret">
  Neo opens a digital wellness retreat
</Spoiler>;

// You can hide blocks as well!
<Spoiler tagName="div">
  <img />
</Spoiler>;
```

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

### Spoiler Reveal on Click (Uncontrolled)

Source: https://context7.com/molefrog/spoiled/llms.txt

Configure the spoiler to reveal its content when the user clicks on it. This is an uncontrolled component, meaning it manages its own hidden state.

```tsx
// --- Reveal on click (uncontrolled) ---
<Spoiler revealOn="click">Click to uncover the truth</Spoiler>
```

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

### Programmatically Controlling Spoiler State

Source: https://github.com/molefrog/spoiled/blob/main/README.md

Manage the spoiler's hidden state externally using the `hidden` prop and an event handler like `onClick` to toggle the state.

```jsx
const [hidden, setHidden] = useState(true);

<Spoiler hidden={hidden} onClick={() => setHidden((s) => !s)} />;
```

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

### Spoiler asChild: Merge onto Existing Element

Source: https://context7.com/molefrog/spoiled/llms.txt

Use the `asChild` prop to apply the spoiler's functionality directly to an existing element without adding an extra wrapper div. Useful for semantic HTML.

```tsx
// --- asChild: merge spoiler onto an existing element (no extra wrapper) ---
<Spoiler asChild>
  <blockquote aria-label="spoiler quote">
    Snape kills Dumbledore.
  </blockquote>
</Spoiler>
```

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

### Disabling Word Shape Mimicry

Source: https://github.com/molefrog/spoiled/blob/main/README.md

The `mimicWords` prop can be set to `false` to disable the feature that fakes word shapes and spaces for inline elements, rendering it as a solid line instead. This is only available in Houdini-enabled browsers.

```jsx
<Spoiler mimicWords={false}>This will be rendered as a solid line of text</Spoiler>
```

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

### Block-Level Spoiler for Complex Content

Source: https://context7.com/molefrog/spoiled/llms.txt

Wrap non-textual content like images or divs in a spoiler. The `tagName` prop allows specifying the wrapper element type.

```tsx
// --- Block-level spoiler (wraps images, divs, etc.) ---
<Spoiler tagName="div">
  <img src="/secret.jpg" alt="classified" />
</Spoiler>
```

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

### Passing Arbitrary HTML Attributes to Spoiler

Source: https://context7.com/molefrog/spoiled/llms.txt

Arbitrary HTML attributes like `className`, `aria-label`, or `dir` can be passed directly to the `<Spoiler />` component and will be applied to the root element.

```tsx
// --- Pass arbitrary HTML attributes ---
<Spoiler className="my-spoiler" aria-label="hidden secret" dir="rtl">
  مخفی
</Spoiler>
```

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

### Controlled Spoiler with Parent-Managed State

Source: https://context7.com/molefrog/spoiled/llms.txt

Manage the hidden/visible state of the spoiler component from its parent using the `hidden` prop and an `onClick` handler to toggle the state.

```tsx
// --- Controlled: parent owns hidden state ---
const [hidden, setHidden] = useState(true);

<Spoiler hidden={hidden} onClick={() => setHidden((s) => !s)}>
  Frodo destroys the Ring
</Spoiler>
```

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