v1.0.11

Hidden

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/hidden

npm @spark-web/hidden

Source GitHub.com

Bundle unpkg.com

Conditionally display content for different screen sizes and media types.

Hidden below wide

Visible below wide

Open in Playroom

<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="Hidden below wide" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="Visible below wide" height={64} />
  </Hidden>
</Stack>

<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="Hidden below wide" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="Visible below wide" height={64} />
  </Hidden>
</Stack>

Examples

Responsive

Hide content responsively using the above and below props, which accept a breakpoint name.

1. Hidden below wide

2. Hidden below desktop

3. Hidden below tablet

4. Hidden above mobile

5. Hidden above tablet

6. Hidden above desktop

Open in Playroom

<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="1. Hidden below wide" height={64} />
  </Hidden>
  <Hidden below="desktop">
    <Placeholder label="2. Hidden below desktop" height={64} />
  </Hidden>
  <Hidden below="tablet">
    <Placeholder label="3. Hidden below tablet" height={64} />
  </Hidden>
  <Hidden above="mobile">
    <Placeholder label="4. Hidden above mobile" height={64} />
  </Hidden>
  <Hidden above="tablet">
    <Placeholder label="5. Hidden above tablet" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="6. Hidden above desktop" height={64} />
  </Hidden>
</Stack>

<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="1. Hidden below wide" height={64} />
  </Hidden>
  <Hidden below="desktop">
    <Placeholder label="2. Hidden below desktop" height={64} />
  </Hidden>
  <Hidden below="tablet">
    <Placeholder label="3. Hidden below tablet" height={64} />
  </Hidden>
  <Hidden above="mobile">
    <Placeholder label="4. Hidden above mobile" height={64} />
  </Hidden>
  <Hidden above="tablet">
    <Placeholder label="5. Hidden above tablet" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="6. Hidden above desktop" height={64} />
  </Hidden>
</Stack>

Print

Conditionally display content for print using the on prop.

Hidden on screen

Hidden on print

Open in Playroom

<Stack gap="small">
  <Hidden on="screen">
    <Placeholder label="Hidden on screen" height={64} />
  </Hidden>
  <Hidden on="print">
    <Placeholder label="Hidden on print" height={64} />
  </Hidden>
</Stack>

<Stack gap="small">
  <Hidden on="screen">
    <Placeholder label="Hidden on screen" height={64} />
  </Hidden>
  <Hidden on="print">
    <Placeholder label="Hidden on print" height={64} />
  </Hidden>
</Stack>

Props

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	Children elements to be conditionally rendered.
above?	"mobile" \| "tablet" \| "desktop"	Sets the screen width floor breakpoint the elements should be hidden.
below?	"tablet" \| "desktop" \| "wide"	Sets the screen width ceiling breakpoint the elements should be hidden.
data?	DataAttributeMap	Sets data attributes for the element.
inline?	boolean	Sets whether element should be rendered in-line or on a new line.
on?	"screen" \| "print"	Sets on what type of device element should be hidden. @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types