Nascent Political Miscreant

    react-html-layout
    TypeScript icon, indicating that this package has built-in type declarations

    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

    23

    Version

    2.3.2

    License

    MIT

    Unpacked Size

    32.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • vimbat