Javascript media query match for React.js
npm install react-mqlsJavascript media query match for React.js
- npm install --save react-mqls
import React, { Component } from 'react';
import MediaQuery from 'react-mqls'class Example extends Component {
render() {
return {
query: '(max-width: 767px)',
component: 'text2',
},
{
query: '(max-width: 1199px) and (min-width: 768px)',
component: 'text1',
},
{
query: '(min-width: 1200px)',
component: 'text',
},
]}>
}
}
`Preset usage (media preset)
`
import React, { Component } from 'react';
import MediaQuery from 'react-mqls'class Example extends Component {
render() {
return {
preset: 'xs',
component: 'text2',
},
{
query: '(max-width: 1199px) and (min-width: 768px)',
component: 'text1',
},
{
preset: 'xl',
component: 'text',
},
]}>
}
}
`Query Props
| PropName | Default | PropTypes | Description |
| --- | :---: | :---: | :---: |
| query | | string | | |
| preset | | QueryPreset | The breakpoints of responsive grid follow BootStrap 4 media queries rules xs, sm, md, lg, xl, xxl |
| component | | React.ReactNode | () => React.ReactNode or React.ReactNode |
MediaQuery Props
|
PropName | Default | PropTypes | Description |
| --- | :---: | :---: | :---: |
| queries | | Query[] | |
| targetWindow` | | Window | |- git clone https://github.com/salgum1114/react-mqls.git - Clone the project
- npm start - Run script
- http://localhost:8080 - Host access