Skip Navigation
React Magma

Breakpoints Container

The BreakpointsContainer component can be used to hide/show content at different screen sizes. Breakpoint values are defined in the theme, and can be overridden at the component level.

Basic Usage

By placing multiple Breakpoint components inside the container, you can define multiple versions of the content to be displayed.

Content will be shown for the specified breakpoint, up to the next largest breakpoint.

This component uses the Hide at Breakpoint component.

import React from 'react';


import {
  Breakpoint,
  BreakpointsContainer,
  BreakpointScreenSize,
  Card,
  CardBody,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <BreakpointsContainer>
      <Breakpoint screenSize={BreakpointScreenSize.xs}>
        <Card background={magma.colors.secondary}>
          <CardBody>
            <strong>Extra-Small: </strong>This will be shown from 0 pixels, up
            to 599px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.small}>
        <Card isInverse background={magma.colors.warning500}>
          <CardBody>
            <strong>Small: </strong>This will be shown from 600px pixels up to
            767px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.medium}>
        <Card isInverse background={magma.colors.info700}>
          <CardBody>
            <strong>Medium: </strong>This text will be visible when the browser
            width is 768px and up to 1023px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.large}>
        <Card isInverse background={magma.colors.success}>
          <CardBody>
            <strong>Large: </strong>This text will be visible when the browser
            width is 1024px and to 1199px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.xl}>
        <Card isInverse background={magma.colors.danger}>
          <CardBody>
            <strong>Extra-Large: </strong>This text will be visible when the
            browser width is 1200px and greater.
          </CardBody>
        </Card>
      </Breakpoint>


      <br />


      <Card>
        <CardBody>
          This text will always be visible, as it is not part of a breakpoint.
        </CardBody>
      </Card>
    </BreakpointsContainer>
  );
}

Using Fewer Breakpoints

It is not necessary to use all of the breakpoints. If only two are used, the default breakpoint component will show content up to the first breakpoint. The next one will show content up to the next one, and so on.

import React from 'react';


import {
  Breakpoint,
  BreakpointsContainer,
  BreakpointScreenSize,
  Card,
  CardBody,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <BreakpointsContainer>
      <Breakpoint screenSize={BreakpointScreenSize.xs}>
        <Card background={magma.colors.secondary}>
          <CardBody>
            <strong>Extra-Small: </strong>This will be shown from 0 pixels, up
            to 959px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.medium}>
        <Card isInverse background={magma.colors.info700}>
          <CardBody>
            <strong>Medium: </strong>This text will be visible when the browser
            width is 960px and larger.
          </CardBody>
        </Card>
      </Breakpoint>
    </BreakpointsContainer>
  );
}

Custom Breakpoints

Custom breakpoints can be shown by using the breakpoints object prop.

import React from 'react';


import {
  Breakpoint,
  BreakpointsContainer,
  BreakpointScreenSize,
  Card,
  CardBody,
  magma,
} from 'react-magma-dom';


export function Example() {
  const customBreakpoints = {
    xs: 0,
    small: 400,
    medium: 760,
    large: 1080,
  };


  return (
    <BreakpointsContainer breakpoints={customBreakpoints}>
      <Breakpoint screenSize={BreakpointScreenSize.xs}>
        <Card background={magma.colors.secondary}>
          <CardBody>
            <strong>Extra-Small: </strong>This will be shown from 0 pixels, up
            to 499px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.small}>
        <Card isInverse background={magma.colors.warning500}>
          <CardBody>
            <strong>Small: </strong>This will be shown from 400px pixels up to
            759px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.medium}>
        <Card isInverse background={magma.colors.info700}>
          <CardBody>
            <strong>Medium: </strong>This text will be visible when the browser
            width is 760px and up to 1079px.
          </CardBody>
        </Card>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.large}>
        <Card isInverse background={magma.colors.success}>
          <CardBody>
            <strong>Large: </strong>This text will be visible when the browser
            width is 1080px and greater.
          </CardBody>
        </Card>
      </Breakpoint>
    </BreakpointsContainer>
  );
}

Breakpoints Container Props

This component uses forwardRef. The ref is applied to the Breakpoints Container div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

breakpoints

Description

Object that defines the pixel size of individual breakpoints

Type

object

Default

{xs: 0, small: 600, medium: 768, large: 1024, xl: 1200}

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

Breakpoint Props

Any other props supplied will be provided to the wrapping div element.

screenSize

Description

The relative screen size for the breakpoint. Will go from pixel width specified up to the next breakpoint.

Type

enum, one of:
BreakpointScreenSize.large
BreakpointScreenSize.medium
BreakpointScreenSize.small
BreakpointScreenSize.xl
BreakpointScreenSize.xs

Default

BreakpointScreenSize.xs

On this page

Deploys by Netlify