Breakpoint Display

When you have a component which drastically needs to change between different screen sizes you can of course use @media queries in your CSS. However, in some cases it’s easier to utilize <BreakpointDisplay /> in order to not have to write the same CSS over and over again. Some times you might not even have a CSS file for the component and just want to use <BreakpointDisplay /> to make it responsive.

Important notes

The components that are rendered will be given a class name which handles the hiding and showing of said component. This means that any component passed into Breakpoint Display must accept a className prop.

Example

Not OK

const MyComponent = () => <div>My component</div>

OK

const MyComponent = ({ className }) => <div className={className}>My component</div>

Basic usage

<BreakpointDisplay components={{
  xxs: <MobileComponent />,
  sm: <TabletComponent />,
  md: <DesktopComponent />,
  lg: <LargeDesktopComponent />,
}} />