use-responsive-state
Declare a state based on a responsive expression similar to using the tag img[srcset].

Module

1
import { useResponsiveState } from "@atomico/hooks/use-responsive-state";
Copied!

Syntax

1
const expression = "phone, tablet 720px, destop 1080px";
2
const state = useResponsiveState(expression);
Copied!
Where:
  • state: String, Current state according to the comparison between experiment and matchMedia.
  • expression: String, An expression that declares the serialized states.

Expressions

1
"<defaultState>, <caseState> <size>"
Copied!
Where:
  • defaultState: Default state this cannot contain the use of commas ", ".
  • caseState: Status to show if matchMedia match.
    • size: size expression to observe, example:
      • "1080px": (min-width: 1080px)
      • "1080x720px": (min-width: 1080px) and (min-height: 720px)
      • "50rem": (min-width: 50rem)
      • "50em": (min-width: 50em)

Example

The following example shows the use of useResponsiveState, to display a message based on the mediaquery.
WebComponents.dev
WebComponents.dev
Copy link
Edit on GitHub