Hide your precious secrets. Realistic <Spoiler /> component for React, powered by CSS Houdini
Inspired by the spoiler markup in Telegram messenger, spoiled displays an animated cloud of particles over content that should stay confidential (until revealed).
Uses CSS Painting API for realistic rendering of inline elements. Comes with a fallback
Accessible, supports light/dark/system mode
Customizable FPS, density, color, noise animation, content transitions and more
Comes in styled or unstyled variants
⌘ It's easy to use
Install the package via npm:
npm i spoiled
Now, wrap your text in a spoiler, so that all essential plot twists and suprises remain hidden
import { Spoiler } from "spoiled"; // Reveals on hover <Spoiler> Hogwarts is a startup incubator </Spoiler>
By default, the spoiler is uncontrolled and will reveal on hover. See how this behaviour can be customised.
⌘ Hide block elements under a spoiler
By default, spoiler wraps your content in a <span />, but you can use tagName prop, to customise the wrapper to hide block elements.
<Spoiler tagName="div"> <img /> </Spoiler>
As of 2024, CSS Houdini API is supported by the 70% of the browsers. We do have a fallback though, so here is what it will look like in Safari.