Skip to content

kmamykin/react-media-hoc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Media

This projects provides a simple and straight forward method for a React application to adopt and respond to browser media. Most of the time adding media queries to project's CSS is the right way to go. However there are times when an application component needs to detect the resolution of a media device or respond to a change to media/device orientation. This simple Higher Order Component helps you to do just that.

Installation

npm install react-media-hoc --save

or

yarn add react-media-hoc

Usage

import responsiveToMedia from 'react-media-hoc'

// A simple stateless component will do
const MyResponsiveComponent = ({portrait, mobile}) => (
  <div>
    {
      portrait && <p>You are in portrait mode</p>
    }
    {
      mobile && <p>You are on mobile device</p>
    }
  </div>
)

export default responsiveToMedia({
  portrait: '(orientation: portrait)',
  mobile: { maxWidth: 300 }
})(MyResponsiveComponent)

responsiveToMedia call accepts an object with a list of media queries to monitor. The keys of the object denote the props that will be passed to wrapped component (MyResponsiceComponent in the example above) and the value of those props will be a boolean corresponding to the media query matching or not.

The media query can be expressed as a string or as an object which will be parsed using json2mq.

Just FYI: it helps to add this meta tag to the head of your html:

<meta name="viewport" content="width=device-width, initial-scale=1">

About

React HOC component to respond to media queries

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published