Visible

Search…
Visible
Specification
"Visible" component is a utility component that displays the given children when a certain responsive condition is met.
Current implementation utilizes the visibility: hidden and visibility: visible CSS properties for dynamically displayed content. That is to preserve a physical space taken by the component and prevent page jumps during Server-Side Rendering.
Props
<Visible/> component accepts the same props as the <Only/> component. Please refer to its description.
Example
Explicit breakpoint
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <article>
6
    {/* Refer to a breakpoint defined in "Layout.configure()" by name */}
7
    <Visible for="sm">
8
      <p>Renders on "sm" breakpoint</p>
9
    </Visible>
10
    
11
    {/* Or, provide a custom breakpoint object */}
12
    <Visible for={{ minWidth: 900, maxWidth: 1000 }}>
13
      <p>Renders on the custom breakpoint</p>
14
    </Visible>
15
  </article>
16
)
Copied!
High-pass
High-pass is a display model where the content is shown after a specified breakpoint (incl.).
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <Visible from="md">
6
    <p>Is not visible on xs and sm.</p>
7
  </Visible>
8
)
Copied!
Low-pass
Low-pass is a display model where the content is displayed prior to a specified breakpoint.
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <Visible to="md">
6
    <p>Visible only before md breakpoint.</p>
7
  </Visible>
8
)
Copied!
Bell
Bell is a combination of low-pass and high-pass display models. The content is displayed starting from a certain breakpoint, and displayed prior to a certain breakpoint.
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <Visible from="sm" to="lg">
6
    <p>Is visible only from "sm" up to "lg" (not including).</p>
7
  </Visible>
8
)
Copied!
Notch
Notch is the reversed variant of the Bell behavior: the content is visible everywhere except the given breakpoints range.
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <Visible except from="sm" to="lg">
6
    <p>Visible on xs and xl.</p>
7
  </Visible>
8
)
Copied!
Standalone usage
This component can be used independently from any other components of the library.
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = (props) => (
5
  <article>
6
    <h2>{props.title}</h2>
7
    <p>{props.content}</p>
8
​
9
    <Visible to="sm">
10
      <a href={props.shareUrl}>Share on Twitter</a>
11
    </Visible>
12
  </article>
13
)
Copied!
Custom breakpoints
Apart from passing defined breakpoint names, you can provide a custom breakpoint Object to the props of this component. The provided breakpoint's options will be used to control the rendering behavior.
1
import React from 'react'
2
import { Visible } from 'atomic-layout'
3
​
4
export const Post = () => (
5
  <article>
6
    {/* Explicit */}
7
    <Visible for={{ maxWidth: 568 }}>
8
      <p>Visible for the given breakpoint</p>
9
    </Visible>
10
    
11
    {/* High-pass */}
12
    <Visible from={{ minWidth: 792 }}>
13
      <p>Visible stating from the given breakpoint</p>
14
    </Visible>
15
    
16
    {/* Low-pass */}
17
    <Visible to={{ maxWidth: 500 }}>
18
      <p>Visible prior to the given breakpoint.</p>
19
    </Visible>
20
    
21
    {/* Bell */}
22
    <Visible from={{ minWidth: 568 }} to={{ maxWidth: 769 }}>
23
      <p>Visible only between the given two breakpoints.</p>
24
    </Visible>
25
    
26
    {/* Notch */}
27
    <Visible except from={{ minWidth: 568 }} to={{ maxWidth: 769 }}>
28
      <p>Visible everywhere except the given breakpoint range.</p>
29
    </Visible>
30
  </article>
31
)
Copied!
​
​
Only
Next - API
Hooks
Last modified 2yr ago
Copy link
Contents