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

Name	Description	Default	Required?
initialViewportHeight	Thie height to use before retrieving it from the DOM.	0px	yes, if not specified on layout components
initialHeaderHeight	Initial height to use for the header.	0px	yes, if not specified on <HeaderLayout />
initialFooterHeight	Initial height to use for the footer.	0px	yes, if not specified on <FooterLayout />
sidebarWidth	The width to use for the sidebar.	0px	yes, if not specified on <SidebarLayout />
onRenderHeader	Invoked to render the header.	undefined	yes, if not specified on <HeaderLayout />
onRenderFooter	Invoked to render the footer.	undefined	yes, if not specified on <FooterLayout />
onRenderSidebar	Invoked to render the sidebar.	undefined	yes, if not specified on <SidebarLayout />
sidebarContainerStyle	Extra css to apply.	undefined	no
sidebarBodyStyle	Extra css to apply.	undefined	no
sidebarVoidStyle	Extra css to apply.	undefined	no
headerStyle	Extra css to apply.	undefined	no
footerStyle	Extra css to apply.	undefined	no

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

Name	Description	Default	Required?
initialViewportHeight	Initial height to use for the viewport.	undefined	yes, if not specified on <LayoutProvider />
initialHeaderHeight	The height to use before retrieving it from the DOM.	undefined	yes, if not specified on <LayoutProvider />
onRenderHeader	Invoked to render the inner body of the header.	undefined	yes, if not specified on <LayoutProvider />
headerStyle	Additional css to apply to the rendered header body.	undefined	no
children	The main page content to render below the header.	undefined	yes

SidebarLayout

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

Props

Name	Description	Default	Required?
initialViewportHeight	Initial height to use for the viewport.	undefined	yes, if not specified on <LayoutProvider />
sidebarWidth	Width of the sidebar.	0px	yes, if not specified on <LayoutProvider />
sidebarContainerStyle	Extra css to apply	undefined	no
sidebarBodyStyle	Extra css to apply	undefined	no
sidebarVoidStyle	Extra css to apply	undefined	no
isMainStatic	Should <main> element use height instead of min-height	false	no
isFooterStatic	Should <footer> element use height instead of min-height	false	no
children	The content to render (to the left) of the sidebar.	undefined	yes

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

Name	Description	Default	Required?
initialFooterHeight	Intitial height (px) to use for the footer before measuring and resizing in the DOM.	undefined	yes, if not specified on <LayoutProvider />
onRenderFooter	Invoked to render the footer.	undefined	yes, if not specified on <LayoutProvider />
footerStyle	Extra css to apply.	undefined	no
isMainStatic	Should <main> use height instead of min-height?	false	no
isFooterStatic	Should <footer> use height instead of min-height?	false	no
children	The content to render (above) the footer, as the main page.	undefined	yes

Main

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

Props

Name	Description	Default	Required?
isStatic	Should <main> use height instead of min-height?	false	no
children	The content to render within this element.	null	yes

withLayout

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

Props Provided

Name	Description	Overwritable?
viewportHeight	The final measured height(px) of the viewport.	no
headerHeight	The final measured height(px) of the header.	no
footerHeight	The final measured height(px_ of the footer.	no
mainHeight	The final measured height(px) of the main content (viewport - (header + footer)).	no
initialHeaderHeight	The initial height(px) to use for the header before measuring.	yes
initialFooterHeight	The initial height(px) to use for the footer before measuring.	yes
onResize	Function used to update <LayoutProvider /> from each layout component.	no
onRenderHeader	Function used by <HeaderLayout /> to render its content.	yes
onRenderFooter	Function used by <FooterLayout /> to render its content.	yes
onRenderSidebar	Function used by <SidebarLayout /> to render its content.	yes
headerStyle	Extra css to use.	yes
footerStyle	Extra css to use.	yes
sidebarWidth	The width(px) to use.	yes
sidebarContainerStyle	Extra css to use	yes
sidebarBodyStyle	Extra css to use.	yes
sidebarVoidStyle	Extra css to use.	yes

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>
  )
}