NoScriptProperty

Detect if javascript is enabled/disabled using CSS variables

This component takes advantage of fallback values on CSS variables to conditionally render a style, see examples

When do I Use This?

This component is useful when you want to conditionally style elements depending on if javascript is enabled/disabled, comes with a class by default that hides elements using display: none if javascript is disabled

How to Use

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty />

<div class="noscript-hide">
  This element is hidden if javascript is disabled
</div>

<p style="color: var(--noscript, red);">
  This text is only red if javascript is disabled
</p>

More Examples

Props

selector?: string

Default: :root

The CSS selector that the variable is attached to, not recommended to change unless scoping the variable to a specific element

name?: string

Default: noscript

--{name}

Name of the included conditional CSS property, its value is equal to default when javascript is enabled or initial if javascript is disabled

Note: Be careful that this value does not collide with other CSS variables on your website

class?: string|false

Default: {name}-hide

Name of the included class that will hide an element using display: none if javascript is disabled

Pass false to stop class from being added

Class is only included if the default prop is false

Note: Be careful that this value does not collide with other CSS classes on your website

default?: string

Default: false

Default value of the --{name} CSS property (when javascript is enabled), defaults to false for the included hide class

Slots

default

Anything passed to default prop will be passed into a <noscript> element

<noscript>
  ...
  <slot />
</noscript>

Examples

Use included hide class

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty />

<div class="noscript-hide">
  This element is hidden if javascript is disabled
</div>

Rename the included class

Note: Make sure this class does not collide with any class names in your project

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty class="no-js-hide"/>

<div class="no-js-hide">
  This element is hidden if javascript is disabled
</div>

Exclude class

Exclude the included class from being created if you only want to use the CSS variable

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty class={false}/>

<p style="color: var(--noscript, red);">
  This text is only red if javascript is disabled
</p>

Rename CSS variable

Note: Make sure this variable name does not collide with any other variables in your project

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty name="no-js"/>

<p style="color: var(--no-js, red);">
  This text is only red if javascript is disabled
</p>

Change default value

Change the default value (value passed when javascript is enabled) of CSS variable

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty default="green"/>

<p style="color: var(--noscript, yellow);">
  This text is green if javascript is enabled, yellow if javascript is disabled
</p>

Scope variable to a specific selector

Only for advanced use cases

---
import { NoScriptProperty } from 'astro-headless-ui';
---

<NoScriptProperty selector="#one" name="noscript-1" default="green"/>
<NoScriptProperty selector="#two" name="noscript-2" default="blue"/>

<section id="one">
  <p style="color: var(--noscript-1, yellow);">
    This text is green if javascript is enabled, yellow if javascript is disabled
  </p>
</section>

<section id="two">
  <p style="color: var(--noscript-2, red);">
    This text is blue if javascript is enabled, red if javascript is disabled
  </p>
</section>