Basic react page layout.
npm install react-html-layout
Some browsers have default styles for html
or body
tags. We should be sure that below tags have:
html,
body {
margin: 0;
padding: 0;
}
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 hasstring
type.- Layout occupies whole visible page space, that's because it's height is
100vh
. - To make
header
fixed, setfixedHeader
totrue
. - To make
footer
fixed, setfixedFooter
totrue
. - To make
leftSidebar
and/orrightSidebar
fixed, setfixedSidebar
totrue
.
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 |
Centralized content with fixed width
import { ContentWrapper } from 'react-html-layout';
...
<ContentWrapper width={300}>
Content example. Content example. Content example.
</ContentWrapper>
Name | type | Description |
---|---|---|
width |
number |
Width of the content |
children |
ReactNode |
Content |