Simple React JS line banner Component with fade in and fade out animation.
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.
How to thank me? Just click on ⭐️ button :)
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm i react-js-banner
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:
Name | Type | Mandatory | Description |
---|---|---|---|
title | String | N | Adding some text will make the banner appear |
css | object | N | CSS customizations |
visibleTime | int | N | time in ms you want the banner to be visible |
image | String | N | image to appear at the left of text |
imageClass | String | N | image css class e.g “image-customized-class” |
transitionAppearTime | number | N | time for the banner to appear |
transitionTime | number | N | time for the transition to take |
showBanner | bool | N | force the banner to show or hide, this will override the visibleTime variable |
e.g
<Banner showBanner={true}>
<div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
</Banner>
Author: jciccio
Source Code: https://github.com/jciccio/react-js-banner
#reactjs #javascript #react