react-html-layout

react-html-layout

Basic react page layout.

Usage

Installation:

npm install react-html-layout

Make sure you have next styles

Some browsers have default styles for html or body tags. We should be sure that below tags have:

html,
body {
  margin: 0;
  padding: 0;
}

Glossary

• Layout
• ContentWrapper

Layout

import { Layout } from 'react-html-layout';
...
<Layout
    header="Header"
    footer="Footer"
    leftSidebar="Left Sidebar"
    rightSidebar="Right Sidebar">
    Content
</Layout>

• header, footer, leftSidebar, rightSidebar contains default styles if content has string type.
• Layout occupies whole visible page space, that's because it's height is 100vh.
• To make header fixed, set fixedHeader to true.
• To make footer fixed, set fixedFooter to true.
• To make leftSidebar and/or rightSidebar fixed, set fixedSidebar to true.

Options

Name	type	Description
className	string	Root class name
style	CSSProperties	Root style
header	ReactNode	Header content.
fixedHeader	boolean	Toggles header to be fixed
footer	ReactNode	Footer content.
fixedFooter	boolean	Toggles footer to be fixed
leftSidebar	ReactNode	Left Sidebar content
leftSidebarStyle	CSSProperties	Left Sidebar style
rightSidebar	ReactNode	Right Sidebar content
rightSidebarStyle	CSSProperties	Right Sidebar style
fixedSidebar	boolean	Toggles leftSidebar or/and rightSidebar to be fixed
content, children	ReactNode	Content of the page

ContentWrapper

Centralized content with fixed width

import { ContentWrapper } from 'react-html-layout';
...
<ContentWrapper width={300}>
    Content example. Content example. Content example.
</ContentWrapper>

Options

Name	type	Description
width	number	Width of the content
children	ReactNode	Content