@5rabbits/headerstrip

A component to display advertising campaings as a header banner in your apps.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
415Jun 28, 2021Jul 6, 2018Minified + gzip package size for @5rabbits/headerstrip in KB

Readme

@5rabbits/headerstrip npm Travis Codecov

A component to display advertising campaings as a header banner in your apps. Stores behavior locally on localStorage.

Usage

  • Install with yarn add @5rabbits/headerstrip.
  • Install peer dependencies (if you haven't already) yarn add react@^16.0.0 react-dom@^16.0.0.
  • Use the component:
import Headerstrip from '@5rabbits/headerstrip'
import '@5rabbits/headerstrip/dist/headerstrip.css'

<Headerstrip />

Demo

Props

prop type default required description
id string true Advertising unique id, if not supplied the headerstrip will not render.
title string 'Placeholder title' Headerstrip title, the main message should be here.
texts object {accept: 'Accept', dismiss: 'Dismiss', remind_me_later: 'Snooze'} Texts used in the component action buttons.
onAccept function Callback when accept button is clicked.
onDismiss function Callback when dismiss button is clicked.
onSnooze function Callback when snooze button is clicked.

Development

  • Run yarn start to start building the library in watch mode.
  • Write stories in the stories/index.js file.
  • This project lints and prettifies source files automatically before commiting. You can run yarn lint and yarn prettify to do this operations manually before commiting (although you shouldn't need to).

Testing

  • Pending

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.