@cmdlucas/react-mediaquery

About

A React helper library built upon semantic-ui to make serving different components to different screens a breeze via server rendering or in browsers. Currently supports Mobile, Tablet and Desktop.

Usage

This library is only compatible with React.

Install

npm install @cmdlucas/react-mediaquery

Example

Say we had a root DOM element we wanted to render different contents to according to screen width change

import React from 'react'
import ReactDOM from 'react-dom'
import { MqProvider, MediaQuery, 
    desktopScreen, tabletScreen, mobileScreen 
} from '@cmdlucas/react-mediaquery'

//It is required to use the Provider component as specified below 
//before calling MediaQuery anywhere down the Tree

const Menu = props => {
    return (
        <MqProvider>
            <MediaQuery type={desktopScreen}> 
                <h2> This is a desktop screen </h2>
            </MediaQuery>
            <MediaQuery type={tabletScreen}>
                <h3> This is a tablet screen </h3> 
            </MediaQuery>
            <MediaQuery type={mobileScreen}> 
                <h4> This is a mobile screen </h4> 
            </MediaQuery>
        </MqProvider>
    )
}

ReactDOM.render(<Menu />, document.getElementById("root"))

The Provider can be served an initial screen width either by supplying the user agent as seen below or by supplying a function that explicitly returns a specific number

//...
import { MqProvider, widthFactory } from 'react-mediaquery'
//...

const MenuA = props => {
    return (
        <MqProvider width={widthFactory(request.userAgent))}>
            //....
        </MqProvider>
    )
}

//This is also valid
const MenuB = props => {
    return (
        <MqProvider width={() => 576}>
            //....
        </MqProvider>
    )
}

//...

Additional knowledge

You can supply other screen types to the MediaQuery component. Just import and use

Supported screen types

• desktopScreen
• mobileScreen
• tabletScreen
• mobileAndTablet
• desktopAndTablet

License

MIT