Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/molefrog/spoiled
🪄 Hide precious secrets. Realistic <Spoiler /> component for React.js
https://github.com/molefrog/spoiled
component houdini particles spoiler ui
Last synced: 6 days ago
JSON representation
🪄 Hide precious secrets. Realistic <Spoiler /> component for React.js
- Host: GitHub
- URL: https://github.com/molefrog/spoiled
- Owner: molefrog
- License: unlicense
- Created: 2022-12-26T14:11:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T11:55:37.000Z (about 2 months ago)
- Last Synced: 2025-01-19T23:10:48.442Z (13 days ago)
- Topics: component, houdini, particles, spoiler, ui
- Language: TypeScript
- Homepage: https://spoiled.vercel.app
- Size: 1.37 MB
- Stars: 318
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Realistic `` component for React
Inspired by [Telegram spoilers](https://telegram.org/blog/reactions-spoilers-translations#spoilers),
**spoiled** renders an animated particle cloud covering text, inline or block elements, keeping them
hidden until revealed.
- Uses **[CSS Painting API](https://caniuse.com/css-paint-api) (Houdini)** to achive realistic
rendering for inline elements. Comes with a static image **fallback**;
- Supports **light/dark/system** mode;
- Animated **content transitions** (_fade/iris_), or custom;
- Respects `prefers-reduced-motion`;
- Control the performance: **FPS**, **density**, **color**, and more;
> CSS Painting API is still [unsupported](https://caniuse.com/css-paint-api) in Firefox and Safari.
> We provide a static fallback image for these browsers, that you can customise via the `fallback`
> prop. Also, there is a [polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill)
> available.
### How to use?
Install the package, requires React 18:
```jsx
npm i spoiled
```
Or use your package manager of choice:
```jsx
pnpm add spoiled
```
```jsx
yarn add spoiled
```
Wrap your text in a spoiler, so the plot twists stay hidden:
```jsx
import { Spoiler } from "spoiled";
// Reveals on hover
Hogwarts is a high-tech startup incubator
;
```
By default, the spoiler:
- reveals on hover (uncontrolled)
- uses system color scheme
- wraps the content in a `span` element
- injects a small CSS for content transitions (please read below on how to opt out)
All standard props are proxied to the underlying `span` element. You can also use `tagName` prop to
change the tag:
```jsx
Neo opens a digital wellness retreat
;
// You can hide blocks as well!
![]()
;
```
### Hiding and revealing the spoiler
`` is uncontrolled and hidden by default. Use `revealOn` prop to either reveal the
content on click or hover:
```jsx
Click me;
Hover me;
// Click to hide the spoiler
Frodo starts a ring-themed jewelry line
;
```
We do, however, recommend passing `hidden` prop to control the spoiler state from your app:
```jsx
const [hidden, setHidden] = useState(true);
setHidden((s) => !s)} />;
```
### Theming
Spoiler adapts to the current color scheme, but you can also override the theme and the accent color
of the noise:
```jsx
/**
* Theming
*/
// default theme is `system`
/**
* Custom primary color of the noise
*/
// use an array of light and dark colors for
// dynamic accent color
```
### Performance
**Spoiled** uses `IntersectionObserver` to stop the animation when the element leaves the viewport.
You can also use `fps` and `density` props to control the performance:
```jsx
// default FPS is 24, but it should look good at 16-20 as well
// Default: 0.12
// Controls the number of particles rendered
// The higher, the more dense the noise
Fat secret
```
### Shape of words
When applied to inline elements, `` will try to mimic the shape of the words in a
paragraph (faking spaces between words).
Since it can be inaccurate, use `mimicWords` setting to disable it:
```jsx
This will be rendered as a solid line of text
```
### Styling
Spoiled will on-demand inject a small `` tag into the document with a CSS needed to animate
hide and reveal transitions. You can use an unstyled version instead and load these styles
differently.
```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";
```
## Disclaimer
As of 2024, [CSS Houdini API](https://caniuse.com/css-paint-api) is supported by the 70% of the
browsers (we do have a fallback though!). Animation may not be fluid and performant when used on
hude blocks of text.
Also, we don't guarantee that the secrets will stay hidden. Use at your own risk.