react-media-queries
Extensible Media Queries for React.
Install
$ npm install --save react-media-queries
API
<MediaProvider />
A component that provides Media Query data to the matchMedia()
calls in the
component hierarchy below. You can't use matchMedia()
without wrapping the a
component (e.g., the root component) in <MediaProvider>
.
Props
children
(ReactElement) The root of your component hierarchy.
getMedia
(Function): Return the current global media state.initialMedia
(Object): Provide default values for server-side rendering.listener
(Function): Listens to media changes, and returns a function that stops listening.
Example
matchMedia([resolveComponent][, mergeProps])
Connects a React component to the media data. It returns a new, connected component class (i.e., it does not modify the component class passed to it).
Arguments
resolveComponent(media, cb)
(Function): Resolves the component that will receive props. Resolution is synchronous when returning a component, and asynchronously when callingcb
with the resolved component.mergeProps(ownProps, mediaProps, componentProps)
(Function): Custom prop merging
Example
const App = <div> Component ? <Component /> : "loading…" </div> const ResponsiveApp = App
Synchronous resolver:
const resolveComponentsSync = { const isBig = mediaQueryportraitmatches && viewportwidth > 400 return Component: isBig ? : }
Asynchronous resolver:
const resolveComponentsAsync = { ifviewportwidth > 400 require else require }
You can also mix the synchronous approach with the asynchronous one, for instance if you have the mobile component in your bundle and want to lazy-load the desktop one if needed :
const resolveComponentsAsync = { ifviewportwidth > 400 require else return Component: MobileComponent }
Listeners
Listeners determine when media data needs to be recalculated. There are 2
predefined listeners: viewportListener
and createMediaQueryListener
. Custom
listeners are also supported.
viewportListener
Listens to resize
events on the window
.
createMediaQueryListener(mediaQueries: Object)
Listens to window.mediaMatch
events for the given Media Queries.
const mediaQueries = small: "(min-width:300px)" medium: "(min-width: 400px)" large: "(min-width: 500px)" const mediaQueryListener =
composeListener(...listeners)
Compose multiple listeners into one.
const listener =
Creating your own listener
A listener is a function that accepts an update
function argument. The
listener should start listening to its event, and call update
when it
considers it needs to. The listener should return a function that removes the
change listener.
const debouncedViewportListener = { const listener = window return window}
Getters
Getters determine what media data is provided to components. There are 2
predefined getters: viewportGetter
and createMediaQueryGetter
. Custom
getters are also supported.
viewportGetter
Returns the current viewport dimensions in the form: { viewport: { height, width } }
createMediaQueryGetter(mediaQueries: Object)
Returns the current Media Query states in the form: { mediaQuery: { [alias]: { matches, media } } }
. matches
is a boolean, media
is the Media Query
string represented by the alias.
const mediaQueries = small: "(min-width:300px)" medium: "(min-width: 400px)" large: "(min-width: 500px)" const mediaQueryGetter =
composeGetters(...getters)
Compose multiple getters into one.
const getter =
Creating your own getter
A getter must return an object representing the current state at that point in time.
const scrollGetter = scrollY: windowpageYOffset scrollX: windowpageXOffset