A Web Component for showing or hiding content when given conditions are met.
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>
- Add support for container queries
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)
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>
With thanks to the following people:
- David Darnes for the Component Template.
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.