`show-when`

A Web Component for showing or hiding content when given conditions are met.

Examples

General usage example:

<script type="module" src="show-when.js"></script>

<show-when has-param="edit">
  This will be visible by default,
  but will hide
  if the current url
  does not have
  the `edit` query parameter attached.
</show-when>

<show-when has-support="container-name: any" hidden>
  This will be hidden by default,
  but show up in browsers
  that support container queries.
</show-when>

Example using has-any option:

<script type="module" src="show-when.js"></script>

<show-when has-hash="slide-2" has-param="show_all" has-any>
  This will be visible
  if either the hash or query parameter
  is present in the URL
</show-when>

ToDo

Add support for container queries
Watch for resize and hashChange and other events

Installation

You have a few options (choose one of these):

Install via npm: npm install @oddbird/show-when
Download the source manually from GitHub into your project.
Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="show-when.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@oddbird/show-when/show-when.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@oddbird/show-when"
></script>

Credit

With thanks to the following people:

David Darnes for the Component Template.

Support

At OddBird, we enjoy collaborating and contributing as part of an open web community. But those contributions take time and effort. If you're interested in supporting our open-source work, consider becoming a GitHub sponsor, or contributing to our Open Collective.

nickautomatic / show-when