# react-page-banner

> A notification banner that absolutely slides below parent element.

Latest version **3.0.0** (published 2017-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-page-banner
pnpm add react-page-banner
yarn add react-page-banner
bun add react-page-banner
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-10-17 |
| First published | 2016-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Points |
| Maintainers | darthcharles, pts-manuelvalle, ryanirilli, moog16 |
| Keywords | React, component, notification, info, page, banner, bar |

## Links

- npm: https://www.npmjs.com/package/react-page-banner
- Repository: https://github.com/the-unsullied/react-page-banner
- Homepage: https://github.com/the-unsullied/react-page-banner#readme
- Issues: https://github.com/the-unsullied/react-page-banner/issues
- npm.io page: https://npm.io/package/react-page-banner

## Dependencies (6)

- [enzyme](https://npm.io/package/enzyme.md) ^3.1.0
- [immutable](https://npm.io/package/immutable.md) ^3.8.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [babel-preset-airbnb](https://npm.io/package/babel-preset-airbnb.md) ^2.3.2
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2017-10-17
- 2.0.9 — 2017-08-24
- 2.0.8 — 2017-08-24
- 2.0.7 — 2017-08-24
- 2.0.6 — 2017-08-24
- 2.0.5 — 2017-08-24
- 2.0.4 — 2017-08-04
- 2.0.3 — 2017-07-31
- 2.0.2 — 2017-07-28
- 2.0.1 — 2017-07-28
- 2.0.0 — 2017-07-28
- 1.2.2 — 2017-06-27
- 1.2.1 — 2017-06-20
- 1.2.0 — 2017-06-20
- 1.1.12 — 2017-06-13
- … 49 more at https://npm.io/package/react-page-banner/versions

## README

# react-page-banner

*A full width page banner that acts as a notification to the user. When shown banner will absolutely slide below the parent element, and disappear after a certain duration.*

![React Page Banner](https://github.com/the-unsullied/react-page-banner/blob/demo/page-banner-demo.gif)


## Params

**message** {String} Message that the banner will display.

**type** {String} Type of banner, which determines the color and theme of the banner (success, error, etc...).

**duration** {Number} The length of time (in ms) the message is seen by user.

**afterClose** {Method} callback method that is executed after close.

**topOffset** {String} pixel top offset (default `0px`).

**topPalmOffset** {String} pixel top offset for palm media query (default `0px`).

**closeIconClass** {String} classname to add to the close icon element.

**ariaHidden** {Boolean} used to control whether or not the page banner is hidden from screen reader. By default it is true after it closes and animation has completed. It is false if it is showing.



## SCSS Options
To optionally change any of these colors, place the scss variable above the import line of the PageBanner.scss file.

**$page-banner-success-bg** - background color for *success* type page banner

**$page-banner-warning-bg** - background color for *warning* type page banner

**$page-banner-error-bg** - background color for *error* type page banner

**$page-banner-warning-color** - message color for *warning* type page banner

**$page-banner-error-color** - message color for *error* type page banner

**$page-banner-message-success-color** - message color for *success* type page banner

NOTE: For close button you must copy svg image in `dist/page-banner-close.svg` into your own images directory, and implement the class:
```
.page-banner__icon-close {
  background-image: url('/path/to/page-banner-icons.svg');
}

```

If you would like to add a custom class please pass in a string to `closeIconClass`

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