https://github.com/alexseitsinger/react-layouts
Layout components to make constructing a page easier.
https://github.com/alexseitsinger/react-layouts
fixed-header layout react
Last synced: about 1 month ago
JSON representation
Layout components to make constructing a page easier.
- Host: GitHub
- URL: https://github.com/alexseitsinger/react-layouts
- Owner: alexseitsinger
- License: bsd-2-clause
- Created: 2020-02-19T03:43:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T15:00:13.000Z (over 3 years ago)
- Last Synced: 2026-05-04T18:47:27.272Z (about 2 months ago)
- Topics: fixed-header, layout, react
- Language: TypeScript
- Homepage:
- Size: 3.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Layouts
Layout components to make constructing a page easier.
## Installation
```bash
yarn add @alexseitsinger/react-layouts
```
## Exports
#### LayoutProvider
Provides initial props to each layout component used throughout the app. Most of the props specified on the individual layout components will override the values provided by the provider.
###### Props
Name | Description | Default | Required?
--- | --- | --- | ---
initialViewportHeight | Thie height to use before retrieving it from the DOM. | 0px | yes, if not specified on layout components
initialHeaderHeight | Initial height to use for the header. | 0px | yes, if not specified on ``
initialFooterHeight | Initial height to use for the footer. | 0px | yes, if not specified on ``
sidebarWidth | The width to use for the sidebar. | 0px | yes, if not specified on ``
onRenderHeader | Invoked to render the header. | undefined | yes, if not specified on ``
onRenderFooter | Invoked to render the footer. | undefined | yes, if not specified on ``
onRenderSidebar | Invoked to render the sidebar. | undefined | yes, if not specified on ``
sidebarContainerStyle | Extra css to apply. | undefined | no
sidebarBodyStyle | Extra css to apply. | undefined | no
sidebarVoidStyle | Extra css to apply. | undefined | no
headerStyle | Extra css to apply. | undefined | no
footerStyle | Extra css to apply. | undefined | no
#### HeaderLayout
Renders a fixed header at the top of the page.
The header is initially rendered with a `min-height` matching the value of `initialHeaderHeight`. Then, once mounted, the
header's actual height in the DOM is retrieved and set as `height`, then `position: fixed` gets set.
In the browser, all sizes are updated following each window resize.
###### Props
Name | Description | Default | Required?
--- | --- | --- | ---
initialViewportHeight | Initial height to use for the viewport. | undefined | yes, if not specified on ``
initialHeaderHeight | The height to use before retrieving it from the DOM. | undefined | yes, if not specified on ``
onRenderHeader | Invoked to render the inner body of the header. | undefined | yes, if not specified on ``
headerStyle | Additional css to apply to the rendered header body. | undefined | no
children | The main page content to render below the header. | undefined | yes
#### SidebarLayout
Container with space reserved for a fixed sidebar (on the right).
###### Props
Name | Description | Default | Required?
--- | --- | --- | ---
initialViewportHeight | Initial height to use for the viewport. | undefined | yes, if not specified on ``
sidebarWidth | Width of the sidebar. | 0px | yes, if not specified on ``
sidebarContainerStyle | Extra css to apply | undefined | no
sidebarBodyStyle | Extra css to apply | undefined | no
sidebarVoidStyle | Extra css to apply | undefined | no
isMainStatic | Should `` element use `height` instead of `min-height` | false | no
isFooterStatic | Should `` element use `height` instead of `min-height` | false | no
children | The content to render (to the left) of the sidebar. | undefined | yes
#### FooterLayout
Includes a footer element below the main content. Footer height is removed from main element's possible height so it initially fits within the screen.
###### Props
Name | Description | Default | Required?
--- | --- | --- | ---
initialFooterHeight | Intitial height (px) to use for the footer before measuring and resizing in the DOM. | undefined | yes, if not specified on ``
onRenderFooter | Invoked to render the footer. | undefined | yes, if not specified on ``
footerStyle | Extra css to apply. | undefined | no
isMainStatic | Should `` use `height` instead of `min-height`? | false | no
isFooterStatic | Should `` use `height` instead of `min-height`? | false | no
children | The content to render (above) the footer, as the main page. | undefined | yes
#### Main
A container with the remaining height (viewport - header) as either `min-height` or `height` if `isStatic` is true.
###### Props
Name | Description | Default | Required?
--- | --- | --- | ---
isStatic | Should `` use `height` instead of `min-height`? | false | no
children | The content to render within this element. | null | yes
#### withLayout
HOC that supplies the wrapped component with the layout context props.
###### Props Provided
Name | Description | Overwritable?
--- | --- | ---
viewportHeight | The final measured height(px) of the viewport. | no
headerHeight | The final measured height(px) of the header. | no
footerHeight | The final measured height(px_ of the footer. | no
mainHeight | The final measured height(px) of the main content (viewport - (header + footer)). | no
initialHeaderHeight | The initial height(px) to use for the header before measuring. | yes
initialFooterHeight | The initial height(px) to use for the footer before measuring. | yes
onResize | Function used to update `` from each layout component. | no
onRenderHeader | Function used by `` to render its content. | yes
onRenderFooter | Function used by `` to render its content. | yes
onRenderSidebar | Function used by `` to render its content. | yes
headerStyle | Extra css to use. | yes
footerStyle | Extra css to use. | yes
sidebarWidth | The width(px) to use. | yes
sidebarContainerStyle | Extra css to use | yes
sidebarBodyStyle | Extra css to use. | yes
sidebarVoidStyle | Extra css to use. | yes
#### Viewport
Container with `min-height` set to the height of the browser window (or the initial value). If `isStatic` is true, will use `height` instead.
## Example
```javascript
// In app root
import { LayoutProvider } from "@alexseitsinger/react-layouts"
const App = () => (
(
Footer here since it never changes
)}>
)
```
```javascript
import { HeaderLayout, SidebarLayout, FooterLayout } from "@alexseitsinger/react-layouts"
function HomePage(props) {
return (
(
Header content
)}>
(
Sidebar content
)}>
This page content will include a footer below it
)
```
```javascript
import { Viewport } from "@alexseitsinger/react-layouts"
function NotFoundPage(props) {
return (
Something that has the height of the browser.
)
}
```