React JS Banner component customizable with auto hide option
npm install react-js-bannerSimple React JS text banner component with fade in / out animation and customizable options.
It is a simple customizable text banner component (like warning, error, success).
Styles (font and background) can be customized or you can use the built-in variants.
By default the banner has a fade in and fade out animation of 1s (customizable).
This can be used in two ways:
1. Shown for a specific amount of time using visibleTime prop.
2. Handled manually with manual dismissal.
How to thank me?
Just click on ⭐️ button or buy me a tea using the donation button below :)
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
`` console`
npm i react-js-banner
Import Banner in your react component.
` javascript`
import Banner from 'react-js-banner';
`javascript`
title="This is an example Banner Title"
css={{ color: "#000", backgroundColor: "grey", fontFamily: "arial" }}
/>
prop for predefined styles: success, error, warning, info.`javascript
variant="success"
/>
variant="error"
/>
`$3
Fix the banner to the top or bottom of the screen using the prop: top, bottom.`javascript
variant="info"
position="top"
/>
`$3
Add a close button with the prop.`javascript
variant="warning"
dismissible={true}
/>
`Advanced Examples
$3
If you want the banner to be available for a specific amount of time, prop can be passed:`javascript
visibleTime={3000}
/>
`$3
Example of banner with image:
javascript
import logo from './logo.svg';
`
html
image={logo}
imageClass="App-logo"
css={{ color: "white", backgroundColor: "#333" }}
/>
`$3
The banner accepts a list of children to display complex content.
html
h1
h2
`Props
| Name | Type | Mandatory | Description
| ------------- |:-------------:| -----:|:-----|
| id | String | N | Banner Id (optional unless using callback) |
| title | String | N | Adding some text will make the banner appear |
| css | object | N| CSS customizations |
| variant | String | N | Predefined style: 'success', 'error', 'warning', 'info' |
| position | String | N | fixed position: 'top', 'bottom' |
| dismissible | bool | N | shows a close button |
| visibleTime | number | N| Time in milliseconds 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 |
| onHideCallback | function | N| callback when the popup hides (to be used with visible time prop or dismissible) |
Donations
If you think that any information you obtained here is useful and worth of some money and are willing to pay for it, feel free to send any amount through Paypal :)
You can also follow me on Patreon:
https://patreon.com/Jacware
Changelog
$3
* Major Update: Component refactored to Functional Component (Hooks).
* New Feature: prop added (success, error, warning, info).
* New Feature: position prop added (top, bottom).
* New Feature: dismissible` prop added.Licensed under the MIT License © jciccio