# react-html-layout

> Basic react page layout

Latest version **3.0.1** (published 2023-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-html-layout
pnpm add react-html-layout
yarn add react-html-layout
bun add react-html-layout
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2023-08-16 |
| First published | 2019-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vadym Poberezhnyi |
| Maintainers | vimbat |
| Keywords | react, html, layout, header, footer, content, typescript |

## Links

- npm: https://www.npmjs.com/package/react-html-layout
- Repository: https://github.com/berezh/react-html-layout
- Homepage: https://github.com/berezh/react-html-layout#readme
- Issues: https://github.com/berezh/react-html-layout/issues
- npm.io page: https://npm.io/package/react-html-layout

## Dependencies (2)

- [react](https://npm.io/package/react.md) >=16
- [react-dom](https://npm.io/package/react-dom.md) >=16

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2023-08-16
- 3.0.0 — 2023-05-08
- 2.3.2 — 2020-03-26
- 2.3.1 — 2020-03-26
- 2.3.0 — 2020-03-26
- 2.2.13 — 2020-03-26
- 2.2.12 — 2020-03-26
- 2.2.11 — 2020-01-31
- 2.2.10 — 2020-01-31
- 2.2.9 — 2020-01-31
- 2.2.8 — 2020-01-30
- 2.2.7 — 2020-01-30
- 2.2.6 — 2020-01-30
- 2.2.5 — 2020-01-30
- 2.2.4 — 2020-01-30
- … 47 more at https://npm.io/package/react-html-layout/versions

## README

# react-html-layout

Basic react page layout.

<a href="https://www.npmjs.com/package/react-html-layout">
    <img src="https://nodei.co/npm/react-html-layout.png?mini=true"/>
</a>

## 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:

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

## Glossary

- [Layout](#layout)
- [ContentWrapper](#contentwrapper)

## Layout

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

<div align="center">
    <img style="width:400px" src='./images/layout.png'>
</div>

- `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

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

<div align="center">
    <img style="width:400px" src='./images/content-wrapper.png'>
</div>

### Options

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

---
_Source: https://npm.io/package/react-html-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._