react-js-banner 0.6.1 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +46 -21
  2. package/build/index.js +2 -4710
  3. package/build/index.js.LICENSE.txt +11 -0
  4. package/package.json +6 -7
  5. package/src/banner.css +31 -0
  6. package/src/index.js +33 -16
  7. package/webpack.config.js +13 -27
package/README.md CHANGED
@@ -15,16 +15,16 @@ Styles (font and background) can be customized. By default the banner has a fade
15
15
 
16
16
  # How it looks
17
17
 
18
- ![alt text](banner.png "React JS Banner example")
18
+ ![alt text](images/banner.png "React JS Banner example")
19
19
 
20
20
  **How to thank me?**
21
- Just click on ⭐️ button :)
21
+ Just click on ⭐️ button or buy me a tea using the donation button below :)
22
22
 
23
23
  # Installation
24
24
 
25
25
  Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
26
26
 
27
- ```
27
+ ``` console
28
28
  npm i react-js-banner
29
29
  ```
30
30
 
@@ -32,7 +32,7 @@ npm i react-js-banner
32
32
 
33
33
  Import `Banner` in your react component.
34
34
 
35
- ```
35
+ ``` javascript
36
36
  import Banner from 'react-js-banner';
37
37
  ```
38
38
 
@@ -40,8 +40,9 @@ Example:
40
40
 
41
41
  ```javascript
42
42
  <Banner
43
- title={this.state.bannerMessage}
44
- css={this.state.bannerCss}
43
+ id="banner1"
44
+ title="This is an example Banner Title"
45
+ css={{ color: "#000", backgroundColor: "grey", fontFamily: "arial" }}
45
46
  />
46
47
  ```
47
48
 
@@ -49,15 +50,16 @@ If you want the banner to be available for a specific amount of time, visibleTim
49
50
 
50
51
  ```javascript
51
52
  <Banner
53
+ id="banner2"
52
54
  title="This is an example banner with CSS"
53
- css={this.state.banner3Css}
55
+ css={{color: "#FFF", backgroundColor: "red", fontSize: 20 }}
54
56
  visibleTime={3000}
55
57
  />
56
58
  ```
57
59
 
58
60
  For instance, you can define the background color, font color, font family, size, etc.
59
61
 
60
- ```java
62
+ ```javascript
61
63
  {
62
64
  banner1Css: { color: "#FFF", backgroundColor: "green" },
63
65
  banner2Css: { color: "#000", backgroundColor: "grey", fontFamily: "arial" },
@@ -66,9 +68,12 @@ For instance, you can define the background color, font color, font family, size
66
68
  ```
67
69
 
68
70
  Example of banner with image:
69
-
71
+ ```javascript
72
+ import logo from './logo.svg';
73
+ ```
70
74
  ``` html
71
75
  <Banner
76
+ id="banner3"
72
77
  title="This is an example banner with CSS and Image"
73
78
  image={logo}
74
79
  imageClass="App-logo"
@@ -77,9 +82,9 @@ Example of banner with image:
77
82
 
78
83
  ```
79
84
 
80
- New! Now the banner accepts a list of children to display all content data
85
+ New! Now the banner accepts a list of children to display all content data to make it more extensible!
81
86
  ``` html
82
- <Banner showBanner={true}>
87
+ <Banner id="banner4">
83
88
  <div>
84
89
  <h1>h1</h1>
85
90
  <h2>h2</h2>
@@ -88,26 +93,20 @@ New! Now the banner accepts a list of children to display all content data
88
93
  </Banner>
89
94
  ```
90
95
 
91
- Props available:
92
- * title (banner title/message)
93
- * css (style for the banner)
94
- * visibleTime (time in ms that the banner will be shown)
95
- * image (image to show left of banner)
96
- * imageClass (css class to customize image)
97
-
98
-
99
96
  # Props
100
97
 
101
98
  | Name | Type | Mandatory | Description
102
99
  | ------------- |:-------------:| -----:|:-----|
100
+ | id | String | Y | Banner Id you want to use |
103
101
  | title | String | N | Adding some text will make the banner appear |
104
102
  | css | object | N| CSS customizations |
105
- | visibleTime | int | N| time in ms you want the banner to be visible |
103
+ | visibleTime | number | N| time in seconds you want the banner to be visible |
106
104
  | image | String | N| image to appear at the left of text |
107
105
  | imageClass | String | N| image css class e.g "image-customized-class" |
108
106
  | transitionAppearTime | number| N| time for the banner to appear |
109
107
  | transitionTime | number | N| time for the transition to take |
110
108
  | showBanner | bool | N| force the banner to show or hide, this will override the `visibleTime` variable |
109
+ | 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) |
111
110
 
112
111
  # Donations
113
112
 
@@ -121,11 +120,37 @@ https://patreon.com/Jacware
121
120
 
122
121
  # Changelog
123
122
 
123
+ ### v0.7.1
124
+ * Package size optimized from ~600kb+ to <100kb
125
+
126
+ ### v0.7.0
127
+ #### Changes and features
128
+ * New function callback when the popup hides. This should be used with the visible time prop, call and return the id given as param
129
+ For example:
130
+ ``` javascript
131
+ <Banner
132
+ id="banner4"
133
+ title="This is an example banner with CSS and 3 Seconds of Visibility"
134
+ css={this.state.banner3Css}
135
+ visibleTime={3000}
136
+ showBanner={true}
137
+ onHideCallback={(bannerId) => alert('This is an example banner with CSS and 3 Seconds of Visibility Hidden')}
138
+ />
139
+ ```
140
+ * Enhanced fade in / out animations
141
+ * Several code updates and optimiation to avoid double rendering
142
+ * There is no need to use the showBanner prop anymore and will soon be deprecated
143
+
144
+ #### Breaking Changes
145
+ * Banner Id new prop required
146
+
147
+ #### Other
148
+ showBanner prop is under revision and will be deprecated in a future version
149
+
124
150
  ### v0.6.1
125
151
  * Removed Polyfill Dependency
126
152
  * Package size decreased!
127
153
 
128
-
129
154
  ### v0.6.0
130
155
  * Bug Fixes
131
156
  * Dependencies updated