"Only" component renders its children according to the media query parameters provided to it via props. By default, it integrates with the configured Layout breakpoints, allowing quick breakpoint references.
Prop name | Prop type | Default value | Description |
|
| – | Exact breakpoint name at which to render the children. Has the highest priority whenever provided. |
|
| – | Starting breakpoint at which to render the children. Can be combined with the other props. |
|
| – | Ending breakpoint at which to render the children. Can be combined with the other props. |
|
|
| Flag that controls a notch behavior, when set to |
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 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 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 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 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>)
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>)
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.
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>)