Breakpoint component

Bifrost uses some default values for responsive breakpoints:

Breakpoint values

How it works

The <Breakpoint> component renders a <div> with breakpoint CSS classes applied. For example:

• <Breakpoint to="small"> is equivalent to <div className="to-small">
• <Breakpoint from="medium"> is equivalent to <div className="from-medium">
• <Breakpoint from="small" to="medium"> is equivalent to <div className="from-small to-medium">

The <div> and its children are always rendered in the DOM. CSS media queries will apply display: none for the classes that are currently outside of viewport width.

If you need to avoid the extra DOM node, simply use the breakpoint CSS classes directly instead of the <Breakpoint> component.

Examples

Resize your window to see the different texts.

<Breakpoint to='small'>displayed up to small (0px-599px)</Breakpoint>
<Breakpoint from='small' to='medium'>displayed between small and medium (600px-959px)</Breakpoint>
<Breakpoint from='medium'>displayed for medium and larger (960px +)</Breakpoint>
<Breakpoint to='small'>displayed up to small (0px-599px)</Breakpoint>
<Breakpoint from='small' to='medium'>displayed between small and medium (600px-959px)</Breakpoint>
<Breakpoint from='medium'>displayed for medium and larger (960px +)</Breakpoint>

Codesandbox

Since this is wrapped inside an <iframe>, the media queries will only measure the width of the frame.

import Breakpoint from "@intility/bifrost-react/Breakpoint";
export default function () {
  return (
    <>
      <Breakpoint to="small">displayed up to small (0px-599px)</Breakpoint>
      <Breakpoint from="small" to="medium">
        displayed between small and medium (600px-959px)
      </Breakpoint>
      <Breakpoint from="medium">
        displayed for medium and larger (960px +)
      </Breakpoint>
    </>
  );
}