{"id":15412753,"url":"https://github.com/molefrog/spoiled","last_synced_at":"2025-05-16T15:02:57.128Z","repository":{"id":225839349,"uuid":"582340293","full_name":"molefrog/spoiled","owner":"molefrog","description":"🪄 Hide precious secrets. Realistic \u003cSpoiler /\u003e component for React.js","archived":false,"fork":false,"pushed_at":"2025-01-27T20:12:15.000Z","size":1037,"stargazers_count":346,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-16T15:02:12.648Z","etag":null,"topics":["component","houdini","particles","spoiler","ui"],"latest_commit_sha":null,"homepage":"https://spoiled.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/molefrog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-26T14:11:02.000Z","updated_at":"2025-05-06T15:19:18.000Z","dependencies_parsed_at":"2024-05-21T10:15:23.874Z","dependency_job_id":"fd5dfe7e-6f53-4f9b-86f6-634bbced9fdf","html_url":"https://github.com/molefrog/spoiled","commit_stats":{"total_commits":133,"total_committers":2,"mean_commits":66.5,"dds":0.03007518796992481,"last_synced_commit":"7f8e95559fb7e6fa77b3d9ca230e2b86ede603c4"},"previous_names":["molefrog/spoiled"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molefrog%2Fspoiled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molefrog%2Fspoiled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molefrog%2Fspoiled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molefrog%2Fspoiled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/molefrog","download_url":"https://codeload.github.com/molefrog/spoiled/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553936,"owners_count":22090415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","houdini","particles","spoiler","ui"],"created_at":"2024-10-01T16:54:17.123Z","updated_at":"2025-05-16T15:02:57.073Z","avatar_url":"https://github.com/molefrog.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"web/assets/readme-header.webp\" alt=\"Spoiled demo - hide your precious secrets\" /\u003e\n\n## Realistic `\u003cSpoiler /\u003e` component for React\n\nInspired by [Telegram spoilers](https://telegram.org/blog/reactions-spoilers-translations#spoilers),\n**spoiled** renders an animated particle cloud covering text, inline or block elements, keeping them\nhidden until revealed.\n\n- Uses **[CSS Painting API](https://caniuse.com/css-paint-api) (Houdini)** to achive realistic\n  rendering for inline elements. Comes with a static image **fallback**;\n- Supports **light/dark/system** mode;\n- Animated **content transitions** (_fade/iris_), or custom;\n- Respects `prefers-reduced-motion`;\n- Control the performance: **FPS**, **density**, **color**, and more;\n\n\u003e CSS Painting API is still [unsupported](https://caniuse.com/css-paint-api) in Firefox and Safari.\n\u003e We provide a static fallback image for these browsers, that you can customise via the `fallback`\n\u003e prop. Also, there is a [polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill)\n\u003e available.\n\n### How to use?\n\nInstall the package, requires React 18:\n\n```jsx\nnpm i spoiled\n```\n\nOr use your package manager of choice:\n\n```jsx\npnpm add spoiled\n```\n```jsx\nyarn add spoiled\n```\n\nWrap your text in a spoiler, so the plot twists stay hidden:\n\n```jsx\nimport { Spoiler } from \"spoiled\";\n\n// Reveals on hover\n\u003cSpoiler\u003e\n  Hogwarts is a high-tech \u003cb\u003estartup incubator\u003c/b\u003e\n\u003c/Spoiler\u003e;\n```\n\nBy default, the spoiler:\n\n- reveals on hover (uncontrolled)\n- uses system color scheme\n- wraps the content in a `span` element\n- injects a small CSS for content transitions (please read below on how to opt out)\n\nAll standard props are proxied to the underlying `span` element. You can also use `tagName` prop to\nchange the tag:\n\n```jsx\n\u003cSpoiler className=\"custom\" aria-label=\"total secret\"\u003e\n  Neo opens a digital wellness retreat\n\u003c/Spoiler\u003e;\n\n// You can hide blocks as well!\n\u003cSpoiler tagName=\"div\"\u003e\n  \u003cimg /\u003e\n\u003c/Spoiler\u003e;\n```\n\n### Hiding and revealing the spoiler\n\n`\u003cSpoiler /\u003e` is uncontrolled and hidden by default. Use `revealOn` prop to either reveal the\ncontent on click or hover:\n\n```jsx\n\u003cSpoiler revealOn=\"click\"\u003eClick me\u003c/Spoiler\u003e;\n\u003cSpoiler revealOn=\"hover\"\u003eHover me\u003c/Spoiler\u003e;\n\n// Click to hide the spoiler\n\u003cSpoiler defaultHidden={false} revealOn=\"click\"\u003e\n  Frodo starts a ring-themed jewelry line\n\u003c/Spoiler\u003e;\n```\n\nWe do, however, recommend passing `hidden` prop to control the spoiler state from your app:\n\n```jsx\nconst [hidden, setHidden] = useState(true);\n\n\u003cSpoiler hidden={hidden} onClick={() =\u003e setHidden((s) =\u003e !s)} /\u003e;\n```\n\n### Theming\n\nSpoiler adapts to the current color scheme, but you can also override the theme and the accent color\nof the noise:\n\n```jsx\n/**\n * Theming\n */\n\n\u003cSpoiler /\u003e // default theme is `system`\n\u003cSpoiler theme=\"dark\" /\u003e\n\u003cSpoiler theme=\"light\" /\u003e\n\n/**\n * Custom primary color of the noise\n */\n\n\u003cSpoiler accentColor=\"red\" /\u003e\n\n// use an array of light and dark colors for\n// dynamic accent color\n\u003cSpoiler accentColor={[\"black\", \"white\"]} /\u003e\n```\n\n### Performance\n\n**Spoiled** uses `IntersectionObserver` to stop the animation when the element leaves the viewport.\nYou can also use `fps` and `density` props to control the performance:\n\n```jsx\n// default FPS is 24, but it should look good at 16-20 as well\n\u003cSpoiler fps={16} /\u003e\n\n// Default: 0.12\n// Controls the number of particles rendered\n// The higher, the more dense the noise\n\u003cSpoiler density={0.2}\u003eFat secret\u003c/Spoiler\u003e\n```\n\n### Shape of words\n\nWhen applied to inline elements, `\u003cSpoiler /\u003e` will try to mimic the shape of the words in a\nparagraph (faking spaces between words).\n\nSince it can be inaccurate, use `mimicWords` setting to disable it:\n\n```jsx\n\u003cSpoiler mimicWords={false}\u003eThis will be rendered as a solid line of text\u003c/Spoiler\u003e\n```\n\n### Styling\n\nSpoiled will on-demand inject a small `\u003cstyle\u003e` tag into the document with a CSS needed to animate\nhide and reveal transitions. You can use an unstyled version instead and load these styles\ndifferently.\n\n```jsx\nimport { Spoiler } from \"spoiled/no-css\";\n\n// If you're using Vite or similar bundler, these styles will be written to the final CSS bundle\nimport \"spoiled/style.css\";\n```\n\n## Disclaimer\n\nAs of 2024, [CSS Houdini API](https://caniuse.com/css-paint-api) is supported by the 70% of the\nbrowsers (we do have a fallback though!). Animation may not be fluid and performant when used on\nhude blocks of text.\n\nAlso, we don't guarantee that the secrets will stay hidden. Use at your own risk.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolefrog%2Fspoiled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmolefrog%2Fspoiled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolefrog%2Fspoiled/lists"}