react-js-banner 0.6.0 → 0.7.0

package/.babelrc

@@ -1,10 +1,11 @@
 {
-   "presets": [ 
-      "@babel/preset-env",
-      "@babel/preset-react",
-    ],
-   "plugins": [
-      "@babel/plugin-transform-object-rest-spread",
-      "@babel/plugin-transform-react-jsx",
+    "presets":[
+        "@babel/preset-env",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
     ]
 }

package/.eslintrc.json

@@ -0,0 +1 @@
+{}

package/README.md

@@ -18,13 +18,13 @@ Styles (font and background) can be customized. By default the banner has a fade
 ![alt text](banner.png "React JS Banner example")
 
 **How to thank me?**
-Just click on ⭐️ button :)
+Just click on ⭐️ button or buy me a tea using the donation button below :)
 
 # Installation
 
 Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
 
-```
+``` console
 npm i react-js-banner
 ```
 
@@ -32,7 +32,7 @@ npm i react-js-banner
 
 Import `Banner` in your react component.
 
-```
+``` javascript
 import Banner from 'react-js-banner';
 ```
 
@@ -40,8 +40,9 @@ Example:
 
 ```javascript
 <Banner 
-	title={this.state.bannerMessage} 
-	css={this.state.bannerCss} 
+  id="banner1"
+  title="This is an example Banner Title" 
+  css={{ color: "#000", backgroundColor: "grey", fontFamily: "arial" }} 
 />
 ```
 
@@ -49,15 +50,16 @@ If you want the banner to be available for a specific amount of time, visibleTim
 
 ```javascript
 <Banner 
+  id="banner2"
   title="This is an example banner with CSS" 
-  css={this.state.banner3Css} 
+  css={{color: "#FFF", backgroundColor: "red", fontSize: 20 }} 
   visibleTime={3000}
 />
 ```
 
 For instance, you can define the background color, font color, font family, size, etc.
 
-```java
+```javascript
 {
   banner1Css: { color: "#FFF", backgroundColor: "green" },
   banner2Css: { color: "#000", backgroundColor: "grey", fontFamily: "arial" },
@@ -66,9 +68,12 @@ For instance, you can define the background color, font color, font family, size
 ```
 
 Example of banner with image:
-
+```javascript
+import logo from './logo.svg';
+```
 ``` html
 <Banner 
+  id="banner3"
   title="This is an example banner with CSS and Image" 
   image={logo} 
   imageClass="App-logo"
@@ -77,9 +82,9 @@ Example of banner with image:
 
 ```
 
-New! Now the banner accepts a list of children to display all content data
-```
-<Banner showBanner={true}>
+New! Now the banner accepts a list of children to display all content data to make it more extensible!
+``` html
+<Banner id="banner4">
   <div>
     <h1>h1</h1>
     <h2>h2</h2>
@@ -88,42 +93,64 @@ New! Now the banner accepts a list of children to display all content data
 </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
 
 | Name        | Type            | Mandatory | Description  
 | ------------- |:-------------:| -----:|:-----|
+| id      | String | Y | Banner Id you want to use |
 | 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 |
+| visibleTime | number     | N|  time in seconds 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 |
+| onHideCallback | function | N|  callback when the popup hides (to be used with visible time prop in manage state, will pass as param the banner id) |
 
 # 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 :) 
-
+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 :)
 
 [![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2MSMEVFF9P33N)
 
 You can also follow me on Patreon:
+https://patreon.com/Jacware
 
-https://patreon.com/Jacware?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink
 
 # Changelog
 
+
+### v0.7.0
+#### Changes and features
+* New function callback when the popup hides. This should be used with the visible time prop, call and return the id given as param
+For example: 
+``` javascript
+<Banner  
+  id="banner4"
+  title="This is an example banner with CSS and 3 Seconds of Visibility" 
+  css={this.state.banner3Css} 
+  visibleTime={3000} 
+  showBanner={true}
+  onHideCallback={(bannerId) => alert('This is an example banner with CSS and 3 Seconds of Visibility Hidden')}
+/>
+``` 
+* Enhanced fade in / out animations
+* Several code updates and optimiation to avoid double rendering
+* There is no need to use the showBanner prop anymore and will soon be deprecated
+
+#### Breaking Changes
+* Banner Id new prop required
+
+#### Other
+showBanner prop is under revision and will be deprecated in a future version
+
+### v0.6.1
+* Removed Polyfill Dependency
+* Package size decreased!
+
 ### v0.6.0
-* Bug fixes
+* Bug Fixes
 * Dependencies updated
 
 ### v0.5.2