Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-match-media

Package Overview
Dependencies
0
Maintainers
1
Versions
9
Issues
File Explorer

Advanced tools

react-match-media

A react component allows you to conditionally render your components based on media queries.

    2.2.2latest

Version published
Maintainers
1
Yearly downloads
12,588
increased by129.96%

Weekly downloads

Readme

Source

React Match Media

Downloads

A React component that allows you to conditionally render your components based on media queries for your responsive website.

Underline it uses window.matchMedia

alt tag

Usage

Install

npm i react-match-media

Use it in your code (es6 syntax)

import React from 'react'; import ReactDOM from 'react-dom'; import { MatchMediaHOC } from 'react-match-media'; const ComponentForBigScreen = MatchMediaHOC(SomeComponent, '(min-width: 800px)'); const ComponentForSmallScreen = MatchMediaHOC(SomeComponent, '(max-width: 500px)'); ReactDOM.render( <div className="example"> <SomeElementAlwaysRendered /> <ComponentForBigScreen /> <ComponentForSmallScreen /> </div>, document.getElementById('root') )

For more, see the examples

Supported browsers

  • IE10 and above
  • All other major browsers

For older browsers, you need to polyfill window.matchMedia. For more, see Can I Use matchMedia

Development of this component

Start the example

npm install npm start open http://localhost:3000

And then you can edit the source code, hotreloading is enabled, so you can see the changes immediatly

Linting

npm run lint

Testing

npm run test

To generate distribution code

npm run build

Changelog

v2.2.0 - 25/April/2018

Used PropTypes from 'prop-types' package

v2.0.0 - 16/Jan/2017

Introduced a MatchMediaHOC high order component to replace the previous MatchMedia component.

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc