Responsive breakpoint

[mikechabot]

Hey, love this component. Would you be willing to accept a PR that lets the consumer adjust the responsive breakpoint?

const [isMobile] = useMediaQuery('(max-width: 43em)'); // Current behavior

https://github.com/jeanverster/chakra-ui-steps/blob/main/chakra-ui-steps/src/components/Steps/index.tsx#L65

I could see this a couple different ways:

Explicit mediaQuery prop

  interface StepsProps extends HTMLChakraProps<'ol'>, ThemingProps {
    mediaQuery?: string;
    ...
  }

  <Steps activeStep={activeStep} mediaQuery="max-width: 375px">...</Steps> 

External useMediaQuery check

  interface StepsProps extends HTMLChakraProps<'ol'>, ThemingProps {
    isAtBreakpoint?: boolean;
    ...
  }

  const [isSmallerThan375] = useMediaQuery('(max-width: 375px)');

  <Steps activeStep={activeStep} isAtBreakpoint={isSmallerThan375}>...</Steps> 

688px (< 43em)	689px (> 43em)

[jeanverster]

Hey @mikechabot - I would definitely be happy to accept a PR which adds support for this! I was also thinking of trying to make the responsive logic ssr friendly, so if you're up to it that could be a nice addition too 😀 Just been super busy at work recently but will hopefully get some time to address the issues here asap

[jeanverster]

Very delayed, but this is now customisable with the mobileBreakpoint prop in the latest version, can set it to whatever value you like, it defaults to 768px