@alexseitsinger/react-viewport-container v0.4.3

Viewport Container

A react component that passes the viewport dimensions

Installation

yarn add @alexseitsinger/react-viewport-container

Exports

ViewportProvider

Captures and returns the browser dimensions to other components. The values for initialHeight and initialWidth will be used for non-browser environments.

// In your add root

function App(props) {
  return (
    <ViewportProvider initialHeight={"600px"} initialWidth={"600px"}>
      <Route path={"/"} component={HomePage} exact />
    </ViewportProvider>
  )
}

ViewportContainer

Uses the browser dimension height automatically.

function HomePage(props) {
  return (
    // PageContainer's 'height' is automatically set to the viewport height.
    <PageContainer>
      <div>Other stuff</div>
    </PageContainer>
  )
}

withViewport

HOC to add the viewport dimensions as props to another component.

const SomeComponent = withViewport(({ children, viewportHeight, viewportWidth }) => {
  return <div>Some stuff...</div>
})