no-spoilers

1.1.1 • Public • Published

no-spoilers

A progressively-enhanced spoiler tag that works in any frontend. Built using web components.

Example of no-spoilers

no-spoilers was built for my web component course, Component Odyssey. If you'd like to build your first web component library, then you can register your interest.

Installation

npm i no-spoilers

Usage

<script type="module">
  import "no-spoilers/no-spoilers.js";
</script>

<no-spoilers>
  <details>
    <p>This is a spoiler</p>
  </details>
</no-spoilers>

Note: no-spoilers will not render if the child content is not a single details element. This is to ensure that if JavaScript doesn't load, the behaviour fallasback to a standard details element.

Attributes

  • button-text - Displays the text on the button that reveals the spoiler. Default: "Reveal Spoiler"

Notes

I'd like to shoutout this article by Scott O'Hara about building an accessible spoiler element. It was a great resource for improving this component.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.1.13latest

Version History

VersionDownloads (Last 7 Days)Published
1.1.13
1.1.01
1.0.11

Package Sidebar

Install

npm i no-spoilers

Weekly Downloads

5

Version

1.1.1

License

MIT

Unpacked Size

775 kB

Total Files

9

Last publish

Collaborators

  • andrico1234