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.