Difference between react-media and react-responsive

Question

I started thinking about conditionally rendering components in my react app. I came across react-media (https://github.com/ReactTraining/react-media) and react-responsive (https://github.com/contra/react-responsive).

Both seem to be very similar and neither mentions differences to the other or use cases where one is particularly bad and the other is better.

Does anybody know of key differences?

Answer 1

generally they all offer same functionality but they have different maintainers and implementations reactTraining maintains react-media while contra maintains react-responsive its like two competing sides with same product where you get to choose which to use some off the minor differences have noted are.

1. react-media does not specify/limit the number of child components inside of react-media while react-responsive specifies one more than one are wrapped inside a diff
2. react-media render property is a function that is returned when media query is matched while react-reponsive supports a function that is passed boolean value which returns true of false the media query passed and its return type is a single element
3. react-responsive supports camelcased shorthands maxWidth={1224} to construct media queries while react-media does not query={{ maxWidth: 1224 }}
4. react-media can accept an object that are converted to css media queriesquery={{ maxWidth: 599 }} while react-responsive does not
5. react-responsive has a support for server-side rendering which is achieved by passing static values through the values property

at the bottom line they all seem up to good for media queries inside of react it just a matter of choice