Spoiler

Hide content until the user chooses to reveal it

Use the Spoiler component to prevent spoilers in content like reviews or discussions or to protect sensitive information. Text wrapped in a Spoiler component is only revealed after a click:

---
import { Spoiler } from 'webcoreui/astro'
---

<Spoiler>This text is only visible after click.</Spoiler>

<script>
    import { Spoiler } from 'webcoreui/svelte'
</script>

<Spoiler>This text is only visible after click.</Spoiler>

import React from 'react'
import { Spoiler } from 'webcoreui/react'

const Component = () => (
    <Spoiler>This text is only visible after click.</Spoiler>
)

export default Component

Tooltips

To better indicate the purpose of Spoiler components, you can optionally add a tooltip to the element using the tooltip prop. You can also change the positioning of the tooltip using the tooltipPosition prop:

<Spoiler tooltip="Click to reveal">This text is only visible after click.</Spoiler>

<Spoiler tooltip="Click to reveal" tooltipPosition="bottom">
    This text is only visible after click.
</Spoiler>

Inline vs Block Spoilers

By default, the Spoiler component has its display set to inline to ensure each line is hidden separately. To make the element behave as a single block, you can set the block prop to true:

<Spoiler block={true}>...</Spoiler>

Styles

You can also change the style of the Spoiler component using the color prop:

<Spoiler color="var(--w-color-warning)">...</Spoiler>

In case you want to use a single color for all of your Spoiler components, its recommended to set the color globally by overriding the following CSS variables:

html body {
    --w-spoiler-color: var(--w-color-primary);
}

You can also disable animations by setting the animated prop to false:

<Spoiler animated={false}>...</Spoiler>

API

type SpoilerProps = {
    color?: string
    animated?: boolean
    block?: boolean
    tooltip?: string
    tooltipPosition?: 'bottom'
}