# @stellar-apps/min-height-hero

> A Hero component that sets the viewport's height as a `min-height` unless the `maxHeight` prop is set and exceeds the viewport height.

Latest version **3.0.0** (published 2019-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @stellar-apps/min-height-hero
pnpm add @stellar-apps/min-height-hero
yarn add @stellar-apps/min-height-hero
bun add @stellar-apps/min-height-hero
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2019-07-01 |
| First published | 2019-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Jared Lunde |
| Maintainers | jaredlunde, relytmcd |

## Links

- npm: https://www.npmjs.com/package/@stellar-apps/min-height-hero
- Repository: https://github.com/jaredLunde/stellar-apps/tree/master/packages/min-height-hero
- npm.io page: https://npm.io/package/@stellar-apps/min-height-hero

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.5
- [@react-hook/window-size](https://npm.io/package/@react-hook/window-size.md) ^1.0.1

## Recent versions

- 3.0.0 (latest) — 2019-07-01
- 2.0.4 — 2019-03-20
- 2.0.3 — 2019-03-20
- 2.0.2 — 2019-02-27
- 2.0.1 — 2019-02-25
- 2.0.0 — 2019-01-27
- 1.0.4 — 2019-01-24
- 1.0.3 — 2019-01-24
- 1.0.2 — 2019-01-18
- 1.0.1 — 2019-01-12
- 1.0.0 — 2019-01-07

## README

# @stellar-apps/min-height-hero
A Hero component that sets the viewport's height as a `min-height` unless the `maxHeight` prop
is set and exceeds the viewport height.

## Installation
`yarn add @stellar-apps/min-height-hero`

## Usage
```js
import Hero from '@stellar-apps/min-height-hero'

function HomePage (props) {
  return (
    <Hero headerID='my-header' maxHeight={900}>
      
    </Hero>
  )
}
```

### Hero
#### Props
- `maxHeight {number}`
    - **default** `Infinity`
    - The maximum allowed height of the Hero
- `headerID {string}`
    - **default** `main-header`
    - A header DOM id to subtract from the height of the hero. i.e. if provided and 
      the header element's height is 96, the height of the hero will be 
      `viewportHeight - 96`
- `footerID {string}`
    - **default** `null`
    - A footer DOM id to subtract from the height of the hero. i.e. if provided and 
      the footer element's height is 96, the height of the hero will be 
      `viewportHeight - 96`

---
_Source: https://npm.io/package/@stellar-apps/min-height-hero · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._