notifications

Simple React JS line banner Component with fade in and fade out animation

Aug 14, 2020
Simple React JS line banner Component with fade in and fade out animation

react-js-banner

It is a simple line text banner component (like warning, error, success). Styles (font and background) can be customized. By default the banner has a fade in and fade out animation of 2s. This can be used in two ways, banner can be shown for a specific amount of time using visibleTime prop, or can be handled manually by making the title text null or changing the string.

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i react-js-banner

Usage

Import Banner in your react component.

import Banner from 'react-js-banner';

Example:

<Banner title={this.state.bannerMessage} css={this.state.bannerCss} />

If you want the banner to be available for a specific amount of time, visibleTime prop can be passed:

<Banner title="This is an example banner with CSS" css={this.state.banner3Css} visibleTime={3000} />

For instance, you can define the background color, font color, font family, size, etc.

{ banner1Css: { color: "#FFF", backgroundColor: "green" }, banner2Css: { color: "#000", backgroundColor: "grey", fontFamily: "arial" }, banner3Css: { color: "#FFF", backgroundColor: "red", fontSize: 20 } }

Example of banner with image:

<Banner title="This is an example banner with CSS and Image" image={logo} imageClass="App-logo" css={this.state.banner2Css} />

New! Now the banner accepts a list of children to display all content data

<Banner showBanner={true}> <div> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> </div> </Banner>

Props available:

  • title (banner title/message)
  • css (style for the banner)
  • visibleTime (time in ms that the banner will be shown)
  • image (image to show left of banner)
  • imageClass (css class to customize image)

Props

NameTypeMandatoryDescription
titleStringNAdding some text will make the banner appear
cssobjectNCSS customizations
visibleTimeintNtime in ms you want the banner to be visible
imageStringNimage to appear at the left of text
imageClassStringNimage css class e.g "image-customized-class"
transitionAppearTimenumberNtime for the banner to appear
transitionTimenumberNtime for the transition to take
showBannerboolNforce the banner to show or hide, this will override the visibleTime variable

GitHub

Recommended