segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Any clean way to provide responsive props to components #1267

Closed nenadfilipovic closed 3 years ago

nenadfilipovic commented 3 years ago

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.