react-media alternatives and similar libraries
Based on the "Utilities" category.
Alternatively, view react-media alternatives based on common mentions on social networks and blogs.
-
react-on-rails
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. -
react-unity-webgl
React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React. -
<qr-code>
A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element. -
react-stripe-checkout
Load stripe's checkout.js as a react component. Easiest way to use checkout with React. -
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server -
react-fetching-library
Simple and powerful API client for react 👍 Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood. -
react-children-utilities
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children. -
react-translate-component
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content. -
gl-react
DISCONTINUED. OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
state-in-url
Store any user state in query parameters; imagine JSON in a browser URL, while keeping types and structure of data. Dead simple, fast, and with static Typescript validation. Deep links, aka URL synchronization, made easy. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm -
elm-react-component
DISCONTINUED. A React component which wraps an Elm module to be used in a React application. -
react-screen-wake-lock
🌓 React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running -
Redux Slim Async
:alien: A Redux middleware to ease the pain of tracking the status of an async action -
react-slack-notification
React Slack Notification is a lightweight package, Send messages to a Slack channel directly from your react app.
Nutrient - The #1 PDF SDK Library

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-media or a related project?
README
react-media

react-media
is a CSS media query component for React.
A <Media>
component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.
Installation
Using npm:
$ npm install --save react-media
Then, use as you would anything else:
// using ES modules
import Media from 'react-media';
// using CommonJS modules
var Media = require('react-media');
The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-media"></script>
You can find the library on window.ReactMedia
.
Hooks are coming soon!
Hooks are available in 2.X branch.
Install react-media@next
to get it.
useMedia
accepts a single options argument to handle both single and multiple queries, so the same properties as Media are available (except of course render and children props).
Simple usage with multiple queries:
import { useMedia } from 'react-media';
const GLOBAL_MEDIA_QUERIES = {
small: "(max-width: 599px)",
medium: "(min-width: 600px) and (max-width: 1199px)",
large: "(min-width: 1200px)"
};
const matches = useMedia({ queries: GLOBAL_MEDIA_QUERIES });
const marginBottom = matches.large ? 0 : 10;
With single query :
import { useMedia } from 'react-media';
const isSmallScreen = useMedia({ query: "(max-width: 599px)" });
Basic usage
queries
Render a <Media>
component with a queries
prop whose value is an object,
where each value is a valid
CSS media query.
The children
prop should be a function whose argument will be an object with the
same keys as your queries
object, and whose values are booleans indicating whether
each query matches.
import React, { Fragment } from 'react';
import Media from 'react-media';
class App extends React.Component {
render() {
return (
<div>
<Media queries={{
small: "(max-width: 599px)",
medium: "(min-width: 600px) and (max-width: 1199px)",
large: "(min-width: 1200px)"
}}>
{matches => (
<Fragment>
{matches.small && <p>I am small!</p>}
{matches.medium && <p>I am medium!</p>}
{matches.large && <p>I am large!</p>}
</Fragment>
)}
</Media>
</div>
);
}
}
query
Alternatively, if you only need to match against a single media query, the query
prop provides a less-verbose approach.
More documentation about the difference between query
and queries
can be found below.
import React, { Fragment } from 'react';
import Media from 'react-media';
class App extends React.Component {
render() {
return (
<div>
<Media query="(max-width: 599px)" render={() =>
(
<p>I am small!</p>
)}
/>
</div>
);
}
}
query
vs queries
The queries
prop was added to allow for multiple media queries to be matched without excessive nesting or other
workarounds. The query
prop was retained out of recognition that a single query covers many use cases, and there
is already a lot of usage that would be a pain to migrate.
The salient points:
- You cannot use them together: if you do, the component will throw an error. This is to avoid confusion around precedence.
- The render methods differ slightly: for the
queries
prop, therender
and child JSX methods will render if at least one of the given queries is matched. Thequery
prop renders if the given query matches.
queries
In addition to passing a valid media query string, the queries
prop will also accept an object of objects whose forms are similar to
React's built-in support for inline style objects
in e.g. <div style>
. These objects are converted to CSS
media queries via json2mq.
import React from 'react';
import Media from 'react-media';
class App extends React.Component {
render() {
return (
<div>
<h1>These two Media components are equivalent</h1>
<Media queries={{ small: { maxWidth: 599 } }}>
{matches =>
matches.small ? (
<p>The document is less than 600px wide.</p>
) : (
<p>The document is at least 600px wide.</p>
)
}
</Media>
<Media queries={{ small: "(max-width: 599px)" }}>
{matches =>
matches.small ? (
<p>The document is less than 600px wide.</p>
) : (
<p>The document is at least 600px wide.</p>
)
}
</Media>
</div>
);
}
}
Keys of media query objects are camel-cased and numeric values automatically get the px
suffix. See the json2mq docs for more examples of queries you can construct using objects.
Render props
There are three props which allow you to render your content. They each serve a subtly different purpose.
prop | description | example |
---|---|---|
render | Only invoked when at least one of the queries matches. This is a nice shorthand if you only want to render something for a matching query. | <Media queries={{ foo: ... }} render={() => <p>I matched!</p>} /> |
children (function) | Receives an object of booleans whose keys are the same as the queries prop, indicating whether each media query matched. Use this prop if you need to render different output for each of specified queries. |
<Media queries={{ foo: ... }}>{matches => matches.foo ? <p>I matched!</p> : <p>I didn't match</p>}</Media> |
children (react element) | If you render a regular React element within <Media> , it will render that element when at least one of the queries matches. This method serves the same purpose as the render prop, however, you'll create component instances regardless of whether the queries match or not. Hence, using the render prop is preferred (more info). |
<Media queries={{ ... }}><p>I matched!</p></Media> |
query
In addition to passing a valid media query string, the query
prop will also accept an object, similar to React's built-in support for inline style objects in e.g. <div style>
. These objects are converted to CSS media queries via json2mq.
import React from 'react';
import Media from 'react-media';
class App extends React.Component {
render() {
return (
<div>
<h1>These two Media components are equivalent</h1>
<Media query={{ maxWidth: 599 }}>
{matches =>
matches ? (
<p>The document is less than 600px wide.</p>
) : (
<p>The document is at least 600px wide.</p>
)
}
</Media>
<Media query="(max-width: 599px)">
{matches =>
matches ? (
<p>The document is less than 600px wide.</p>
) : (
<p>The document is at least 600px wide.</p>
)
}
</Media>
</div>
);
}
}
Keys of media query objects are camel-cased and numeric values automatically get the px
suffix. See the json2mq docs for more examples of queries you can construct using objects.
Render props
There are three props which allow you to render your content. They each serve a subtly different purpose.
prop | description | example |
---|---|---|
render | Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query. | <Media query="..." render={() => <p>I matched!</p>} /> |
children (function) | Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match. | <Media query="...">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media> |
children (react element) | If you render a regular React element within <Media> , it will render that element when the query matches. This method serves the same purpose as the render prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the render prop is preferred (more info). |
<Media query="..."><p>I matched!</p></Media> |
onChange
You can specify an optional onChange
prop, which is a callback function that will be invoked when the status of the media queries changes. This can be useful for triggering side effects, independent of the render lifecycle.
import React from 'react';
import Media from 'react-media';
class App extends React.Component {
render() {
return (
<div>
<Media
query={{ small: "(max-width: 599px)" }}
onChange={matches =>
matches.small
? alert('The document is less than 600px wide.')
: alert('The document is at least 600px wide.')
}
/>
</div>
);
}
}
Server-side rendering (SSR)
If you render a <Media>
component on the server, it will match by default. You can override the default behavior by setting the defaultMatches
prop.
When rendering on the server you can use the defaultMatches
prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device by analyzing the user-agent string from the HTTP request in your server-side rendering code.
initialState = {
device: 'mobile' // add your own guessing logic here, based on user-agent for example
};
<div>
<Media
queries={{ medium: "(max-width: 500px)" }}
defaultMatches={{ medium: state.device === 'mobile' }}
render={() => <Text>Render me below medium breakpoint.</Text>}
/>
<Media
queries={{ medium: "(min-width: 501px)" }}
defaultMatches={{ medium: state.device === 'desktop' }}
render={() => <Text>Render me above medium breakpoint.</Text>}
/>
</div>;
targetWindow
An optional targetWindow
prop can be specified if you want the queries
to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or a popup window. See this PR thread for context.
About
react-media
is developed and maintained by React Training. If you're interested in learning more about what React can do for your company, please get in touch!