@alexseitsinger/react-layouts v2.2.0

Layouts

Layout components to make constructing a page easier.

Installation

yarn add @alexseitsinger/react-layouts

Exports

LayoutProvider

Provides initial props to each layout component used throughout the app. Most of the props specified on the individual layout components will override the values provided by the provider.

Props

HeaderLayout

Renders a fixed header at the top of the page.

The header is initially rendered with a min-height matching the value of initialHeaderHeight. Then, once mounted, the header's actual height in the DOM is retrieved and set as height, then position: fixed gets set.

In the browser, all sizes are updated following each window resize.

Props

SidebarLayout

Container with space reserved for a fixed sidebar (on the right).

Props

FooterLayout

Includes a footer element below the main content. Footer height is removed from main element's possible height so it initially fits within the screen.

Props

Main

A container with the remaining height (viewport - header) as either min-height or height if isStatic is true.

Props

withLayout

HOC that supplies the wrapped component with the layout context props.

Props Provided

Viewport

Container with min-height set to the height of the browser window (or the initial value). If isStatic is true, will use height instead.

Example

// In app root
import { LayoutProvider } from "@alexseitsinger/react-layouts"

const App = () => (
  <LayoutProvider
    initialViewportHeight={"600px"}
    initialHeaderHeight={"30px"}
    initialFooterHeight={"10px"}
    sidebarWidth={"100px"}
    onRenderFooter={() => (
      <div>Footer here since it never changes</div>
      )}>
    <Router>
      <Route path={"/"} exact component={HomePage} />
      <Route path={"*"} exact component={NotFoundPage} />
    </Router>
  </LayoutProvider>
)

import { HeaderLayout, SidebarLayout, FooterLayout } from "@alexseitsinger/react-layouts"

function HomePage(props) {
  return (
    <HeaderLayout
      renderHeader={() => (
        <div>Header content</div>
      )}>
      <SidebarLayout
        onRenderSidebar={() => (
          <div>Sidebar content</div>
        )}>
        <FooterLayout>
          <div>This page content will include a footer below it</div>
        </FooterLayout>
      </SidebarLayout>
    </HeaderLayout>
  )

import { Viewport } from "@alexseitsinger/react-layouts"

function NotFoundPage(props) {
  return (
    <Viewport>
      Something that has the height of the browser.
    </Viewport>
  )
}