Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  • Specification
  • Props
  • Example
  • Explicit breakpoint
  • High-pass
  • Low-pass
  • Bell
  • Notch
  • Standalone usage
  • Custom breakpoints
  1. API
  2. Components

Only

PreviousCompositionNextVisible

Last updated 5 years ago

Specification

"Only" component renders its children according to the media query parameters provided to it via props. By default, it integrates with the , allowing quick breakpoint references.

Props

Prop name

Prop type

Default value

Description

for

string | Object

–

Exact breakpoint name at which to render the children. Has the highest priority whenever provided.

from

string | Object

–

Starting breakpoint at which to render the children. Can be combined with the other props.

to

string | Object

–

Ending breakpoint at which to render the children. Can be combined with the other props.

except

boolean

false

Flag that controls a notch behavior, when set to true. Can be combined with the other props.

Example

Explicit breakpoint

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = () => (
  <article>
    {/* Refer to a breakpoint defined in "Layout.configure()" by name */}
    <Only for="sm">
      <p>Renders on "sm" breakpoint</p>
    </Only>
    
    {/* Or, provide a custom breakpoint object */}
    <Only for={{ minWidth: 900, maxWidth: 1000 }}>
      <p>Renders on the custom breakpoint</p>
    </Only>
  </article>
)

High-pass

High-pass is a display model where the content is shown after a specified breakpoint (incl.).

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = () => (
  <Only from="md">
    <p>Doesn't render on xs and sm.</p>
  </Only>
)

Low-pass

Low-pass is a display model where the content is displayed prior to a specified breakpoint.

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = () => (
  <Only to="md">
    <p>Doesn't render after md.</p>
  </Only>
)

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.

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = () => (
  <Only from="sm" to="lg">
    <p>Renders only from "sm" up to "lg" (not including).</p>
  </Only>
)

Notch

Notch is the reversed variant of the Bell behavior: the content is rendered everywhere except the given breakpoints range.

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = () => (
  <Only except from="sm" to="lg">
    <p>Renders on xs and xl.</p>
  </Only>
)

Standalone usage

This component can be used independently from any other components of the library.

import React from 'react'
import { Only } from 'atomic-layout'

export const Post = (props) => (
  <article>
    <h2>{props.title}</h2>
    <p>{props.content}</p>

    <Only to="sm">
      <a href={props.shareUrl}>Share on Twitter</a>
    </Only>
  </article>
)

Custom breakpoints

import { Only } from 'atomic-layout'

export const Post = () => (
  <article>
    {/* Explicit */}
    <Only for={{ maxWidth: 568 }}>
      <p>Renders for the given breakpoint</p>
    </Only>
    
    {/* High-pass */}
    <Only from={{ minWidth: 792 }}>
      <p>Renders stating from the given breakpoint</p>
    </Only>
    
    {/* Low-pass */}
    <Only to={{ maxWidth: 500 }}>
      <p>Renders prior to the given breakpoint.</p>
    </Only>
    
    {/* Bell */}
    <Only from={{ minWidth: 568 }} to={{ maxWidth: 769 }}>
      <p>Renders only between the given two breakpoints.</p>
    </Only>
    
    {/* Notch */}
    <Only except from={{ minWidth: 568 }} to={{ maxWidth: 769 }}>
      <p>Renders everywhere except the given breakpoint range.</p>
    </Only>
  </article>
)

Apart from passing defined breakpoint names, you can provide a custom Object to the props of this component. The provided breakpoint's options will be used to control the rendering behavior.

configured Layout breakpoints
breakpoint