Grommet ResponsiveContext : custom breakpoints not making text smaller when screen size reduced

Question

I'm working on a web application and I'm using react in the frontend with grommet ui library for design .. I want to make my web application responsive but when I use ResponsiveContext and add breakpoints values I still get the same text size when I reduce the screen size from large to small .. I copied the breakpoints values from the grommet documentations

code

// other imports ...

import { ResponsiveContext, Grommet } from "grommet";

const theme = {
  global: {
    font: {
      family: "Roboto",
    },
    breakpoints: {
      small: {
        value: 768,
        borderSize: {
          xsmall: "1px",
          small: "2px",
          medium: "4px",
          large: "6px",
          xlarge: "12px",
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px",
        },
        size: {
          xxsmall: "24px",
          xsmall: "48px",
          small: "96px",
          medium: "192px",
          large: "384px",
          xlarge: "768px",
          full: "100%",
        },
      },
      medium: { value: 1536 },
      large: {},
    },
  },
  layer: {
    background: "white",
    border: {
      radius: "10px",
    },
  },
};

const App = () => {

/*
some code 
*/

 return (
    <Grommet theme={theme}>
      <ResponsiveContext.Consumer>
        {(size) => (
          <AppGrid>
            <Toaster />
            <BrowserRouter>
              <Header
                notifsUpdated={notifsUpdated}
                scrollToList={scrollToList}
                
              />
              <GiveawayCreation />

              <Routes>
                <Route
                  path='/'
                  element={
                    <Main
                      data={data}
                      setData={setData}                      
                      refresh={refresh}
                      setRefresh={setRefresh}
                      showOwned={showOwned}
                      setShowOwned={setShowOwned}
                      MainRef={MainRef}
                      fetchLoading={fetchLoading}
                      fetchError={fetchError}
                      size={size}
                    />
                  }
                />
                <Route
                  path='/login/success'
                  element={<LoginSuccess />}
                />
                <Route
                  path='/deletedata'
                  element={
                    <DeletionData
                      setRefresh={setRefresh}
                      refresh={refresh}                    
                    />
                  }
                />
              </Routes>
              <AppFooter />
            </BrowserRouter>
          </AppGrid>
        )}
      </ResponsiveContext.Consumer>
    </Grommet>
  );
};

Answer 1

There might be a couple of reasons for what you are experiencing.

1. Your context is not resolved properly and size is always undefined instead of an actual screen value ("small", "medium"...). A quick way to test that is to add a console log message after size to make sure it's being set properly.
2. After verifying that size is set properly, try to add actual new custom breakpoints to your code and make sure they are resolved. Currently, the code you have shared has the same breakpoint definitions as grommet, so you won't see any difference in the code behavior.

You can try the following theme that is overriding the grommet's breakpoints (adding a size for 'xsmall' and 'xlarge') and that should work:

import React from 'react';

import { Box, Grommet, Heading, ResponsiveContext } from 'grommet';

const customBreakpoints = {
  global: {
    breakpoints: {
      xsmall: {
        value: 375,
      },
      small: {
        value: 568,
        edgeSize: {
          none: '0px',
          small: '6px',
          medium: '12px',
          large: '24px',
        },
      },
      medium: {
        value: 768,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
      large: {
        value: 1024,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
      xlarge: {
        value: 1366,
        edgeSize: {
          none: '0px',
          small: '12px',
          medium: '24px',
          large: '48px',
        },
      },
    },
  },
};

export const CustomBreakpoints = () => (
  <Grommet theme={customBreakpoints} full>
    <ResponsiveContext.Consumer>
      {size => (
        <Box fill background="brand">
          <Heading>{`Hi, I'm ${size}, resize me!`}</Heading>
        </Box>
      )}
    </ResponsiveContext.Consumer>
  </Grommet>
;