Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-html-layout

2.3.2 • Public • Published

react-html-layout

Basic react page layout.

LIVE DEMO

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

Layout based where fixed header/footer is based on position CSS propery.

import { Layout } from 'react-html-layout';
...
<Layout
    header="Header"
    footer="Footer">
    Content
</Layout>
  • 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.

Options

Name type Description
className string Root class name
style React.CSSProperties Root style
header React.ReactNode Header content.
fixedHeader boolean Toggles header to be fixed
fixedHeaderHeight number Height of the fixed header
footer React.ReactNode Footer content.
fixedFooter boolean Toggles footer to be fixed
fixedFooterHeight number Height of the fixed footer
children React.ReactNode Content of the page

FlexLayout

Layout is made base on CSS flexbox stuff.

import { FlexLayout } from 'react-html-layout';
...
<FlexLayout
    header="Header"
    footer="Footer"
    leftSidebar="Left Sidebar"
    rightSidebar="Right Sidebar">
    Content
</FlexLayout>
  • 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 React.CSSProperties Root style
header React.ReactNode Header content.
fixedHeader boolean Toggles header to be fixed
footer React.ReactNode Footer content.
fixedFooter boolean Toggles footer to be fixed
leftSidebar React.ReactNode Left Sidebar content
leftSidebarStyle React.CSSProperties Left Sidebar style
rightSidebar React.ReactNode Right Sidebar content
rightSidebarStyle React.CSSProperties Right Sidebar style
fixedSidebar boolean Toggles leftSidebar or/and rightSidebar to be fixed
content, children React.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 Max width of the content
spacing number Edge spacing
children React.ReactNode Content

Install

npm i react-html-layout

DownloadsWeekly Downloads

74

Version

2.3.2

License

MIT

Unpacked Size

32.1 kB

Total Files

14

Last publish

Collaborators

  • avatar