CSS Media Queries props injection HOC for React


001.1.03 years ago3 years agoMinified + gzip package size for @globocom/with-match-media-props in KB


with-match-media-props NPM CircleCI JavaScript Style Guide

This is a HOC desgined to help you define props according to media queries breakpoints.

Just as CSS media queries, you can combine and/or override props with multi-matching media queries.


npm install --save @globocom/with-match-media-props


  matchMediaMapper: (ownerProps: Object) => Object | Object
): HigherOrderComponent

This HOC accepts a static object mapping media-queries to props, or a function that receives the component props and return the mapped media-queries.


import React, { Component } from 'react'

import withMatchMediaProps from '@globocom/with-match-media-props'

const Component = (props) => (
    <span>MediaQuery: {props.mediaQuery}</span>
    <span>Is larger or equal to 360px: {!!props.mediaQuery360}</span>
    <span>Is larger or equal to 768px: {!!props.mediaQuery768}</span>
const EnhancedComponent = withMatchMediaProps({
  'screen and (min-width: 360px)': {
    mediaQuery: 360,
    mediaQuery360: true,
  'screen and (min-width: 768px)': {
    mediaQuery: 768,
    mediaQuery768: true,

class Example extends Component {
  render () {
    return (
      <EnhancedComponent mediaQuery={1} otherProps="example" />

📺 Check out live demo


MIT © globocom

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.