react-viewportstate v1.2.0

React Viewport State

Pass viewport information to your React component(s)

Usage

// MyComponent.js
import React from 'react'
import ViewportContext from "react-viewportstate"

export default ViewportContext((props) => {

    const { screenState: { device, docHeight, docWidth } } = props;

    return (
        <p>
            Your are on a { screenState.device } screen. Width: { docWidth }px Height: { docHeight }px
        </p>
    )
})

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import MyComponent from "./MyComponent"

ReactDOM.render(
    <MyComponent breakpoint = { 768 } />,
    document.body
);

Props

Context