https://github.com/globocom/with-match-media-props

CSS Media Queries props injection HOC for React
https://github.com/globocom/with-match-media-props

matchmedia mediaquery react

Last synced: about 2 months ago
JSON representation

CSS Media Queries props injection HOC for React

• Host: GitHub
• URL: https://github.com/globocom/with-match-media-props
• Owner: globocom
• Created: 2018-05-04T19:22:52.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-10T18:08:42.000Z (about 8 years ago)
• Last Synced: 2026-05-26T00:18:07.494Z (about 2 months ago)
• Topics: matchmedia, mediaquery, react
• Language: JavaScript
• Size: 328 KB
• Stars: 0
• Watchers: 10
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# with-match-media-props  [![NPM](https://img.shields.io/npm/v/@globocom/with-match-media-props.svg)](https://www.npmjs.com/package/@globocom/with-match-media-props) [![CircleCI](https://circleci.com/gh/globocom/with-match-media-props/tree/master.svg?style=shield)](https://circleci.com/gh/globocom/with-match-media-props/tree/master) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> 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.

## Install

```bash

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

```

## Usage

```js

withMatchMediaProps(

  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`.

Ex:

```jsx

import React, { Component } from 'react'

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

const Component = (props) => (

  


    MediaQuery: {props.mediaQuery}

    Is larger or equal to 360px: {!!props.mediaQuery360}

    Is larger or equal to 768px: {!!props.mediaQuery768}

  

)

const EnhancedComponent = withMatchMediaProps({

  'screen and (min-width: 360px)': {

    mediaQuery: 360,

    mediaQuery360: true,

  },

  'screen and (min-width: 768px)': {

    mediaQuery: 768,

    mediaQuery768: true,

  },

})(Component)


class Example extends Component {

  render () {

    return (

      

    )

  }

}

```

[📺 Check out live demo](https://globocom.github.io/with-match-media-props/)

## License

MIT © [globocom](https://github.com/globocom)