Any clean way to provide responsive props to components

[nenadfilipovic]

In docs you mention using react-component-queries for responsive props, that lib is not maintained, so do you have advice for any other library for that purpose? This one seems most popular https://www.npmjs.com/package/react-responsive, also do you have any clean pattern how to apply conditional props depending on active breakpoint, I could recreate whole component or conditionally provide needed props.

Pattern 1:

const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
});

{ isDesktopOrLaptop && <TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        {...someDesktopOrLaptopProps}
      />
}

Pattern 2:

const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
});

<TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        width: { isDesktopOrLaptop ? "50%" : "100%" }
      />

I really have no opinion on this matter and would like to see how you guys solve this problem with this ui library.

[mshwery]

We haven't adopted any wide-scale responsive queries or conditional component patterns, but in general I would recommend the first pattern when many things change. It has the benefit of being much easier to comprehend in diffs than same-line changes.

The library you linked seems like a good alternative if you are concerned about react-component-queries maintenance status!

[nenadfilipovic]

Thanks