Skip to content

Commit e0983da

Browse files
author
Kyle Andrews
committed
Updated readme
1 parent 67ea34a commit e0983da

File tree

4 files changed

+43
-521
lines changed

4 files changed

+43
-521
lines changed

‎README.md‎

Lines changed: 41 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,50 @@
11
# Notify.js
2-
Notify.js is a utility library helping to manage simple [snackbar notifications](https://material.io/develop/web/components/snackbars/). Checkout the [live demo](https://codewithkyle.github.io/notifyjs/) to see the library in action.
2+
3+
Notify.js is a utility library helping to manage simple [snackbar notifications](https://material.io/develop/web/components/snackbars/). Checkout the [live demo](https://components.codewithkyle.com/snackbars/dark-snackbar) to see the library in action.
34

45
## Installation
56

67
Download Notify.js via NPM:
78

8-
```
9+
```sh
910
npm i --save @codewithkyle/notifyjs
1011
```
1112

1213
Once the package is installed import the package:
1314

1415
```typescript
15-
import { Notify } from '@codewithkyle/notifyjs';
16+
import { NotificationManager } from '@codewithkyle/notifyjs';
17+
```
18+
19+
Then it's as simple as creating a new instance of the class and calling the `notify()` method:
20+
21+
```typescript
22+
const notificationManager = new NotificationManager();
23+
notificationManager.notify({
24+
message: 'All notifications require a message',
25+
});
1626
```
1727

18-
Then it's as simple as creating a new instance of the class:
28+
Notifications are queued and displayed in the order that they were requested. The queue can be skipped by settings the `force` flag to true.
1929

2030
```typescript
21-
new Notify({
22-
message: 'Required message string for the notification'
31+
notificationManager.notify({
32+
message: 'This message will close the current notification and will jump the queue',
33+
force: true,
2334
});
2435
```
2536

2637
## Notification Options
2738

2839
### Duration
2940

30-
Notify.js allows custom notification duration. The minimum time allowed is 4000 (4 seconds) and the maximum is 10000 (10 seconds). When creating a notification that has an interaction the `Infinity` value can be provided to the timer if you want the notification to stick until the user interacts with it.
41+
Notify.js allows custom notification duration. The minimum time allowed is 4 seconds. When creating a notification that has an interaction the `Infinity` value can be provided to the timer if you want the notification to stick until the user interacts with it.
3142

3243
```typescript
33-
new Notify({
34-
message: 'Required message string for the notification',
35-
duration: 6000
44+
notificationManager.notify({
45+
message: 'The user will have to close this notification',
46+
duration: Infinity,
47+
closeable: true,
3648
});
3749
```
3850

@@ -41,112 +53,31 @@ new Notify({
4153
Notify.js also allows for user interactions via a button element. The action requires a custom label for the button along with a callback function that will be called when the `click` event is fired on the button.
4254

4355
```typescript
44-
new Notify({
45-
message: 'Required message string for the notification',
56+
notificationManager.notify({
57+
message: 'A new version of this application is available',
4658
duration: Infinity,
47-
action: {
48-
label: 'Do Something',
49-
callback: this.someCallbackFunction.bind(this)
50-
}
59+
closeable: true,
60+
buttons: [
61+
{
62+
label: 'Update',
63+
callback: () => { console.log('User clicked the update button') },
64+
}
65+
],
5166
});
5267
```
5368

54-
## CSS
69+
## HTML Structure
5570

56-
This library doesn't provide/force any base styles or CSS. The notification element is composed of three elements:
71+
The notification element is composed of the following HTML. This library doesn't provide/force any CSS, for a material design styled snackbar notification [click here](https://components.codewithkyle.com/snackbars/dark-snackbar).
5772

5873
```html
59-
<user-notification>
74+
<snackbar-component>
6075
<p>Custom notification message</p>
61-
<button>Action</button>
62-
</user-notification>
63-
```
64-
65-
Below is the CSS for the snackbar notification used on the [demo page](https://codewithkyle.github.io/notifyjs/), it is based on the snackbar component from [Material Design](https://material.io/develop/web/components/snackbars/).
66-
67-
```css
68-
user-notification{
69-
position: fixed;
70-
bottom: 32px;
71-
left: 50%;
72-
transform: translateX(-50%) scale(0.87);
73-
opacity: 0;
74-
transform-origin: center bottom;
75-
padding: 0 16px;
76-
border-radius: 4px;
77-
min-width: 340px;
78-
max-width: calc(100vw - 64px);
79-
box-shadow: 0 1px 3px rgba(0,0,0, 0.15), 0 2px 6px rgba(0,0,0, 0.15);
80-
animation: popNotification 4000ms cubic-bezier(0.0, 0.0, 0.2, 1);
81-
background-color: rgb(51, 51, 51);
82-
color: rgba(255,255,255, 0.87);
83-
font-size: 14px;
84-
line-height: 48px;
85-
height: 48px;
86-
z-index: 9999;
87-
}
88-
89-
user-notification.is-infinite{
90-
animation: popInNotification 150ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
91-
}
92-
93-
user-notification button{
94-
display: inline-block;
95-
height: 36px;
96-
line-height: 34px;
97-
margin: 0;
98-
padding: 0 16px;
99-
border: none;
100-
outline: none;
101-
box-shadow: none;
102-
border-radius: 2px;
103-
position: absolute;
104-
font-size: 14px;
105-
text-transform: uppercase;
106-
user-select: none;
107-
top: 6px;
108-
right: 6px;
109-
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
110-
}
111-
112-
button:hover{
113-
background-color: hsl(248, 53%, 61%);
114-
}
115-
116-
button:active{
117-
background-color: hsl(248, 53%, 55%);
118-
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
119-
}
120-
121-
p{
122-
margin: 0;
123-
padding: 0;
124-
}
125-
126-
@keyframes popInNotification{
127-
from{
128-
transform: translateX(-50%) scale(0.87);
129-
opacity: 0;
130-
}
131-
to{
132-
transform: translateX(-50%) scale(1);
133-
opacity: 1;
134-
}
135-
}
136-
137-
@keyframes popNotification{
138-
0%{
139-
transform: translateX(-50%) scale(0.87);
140-
opacity: 0;
141-
}
142-
3.75%, 96.25%{
143-
transform: translateX(-50%) scale(1);
144-
opacity: 1;
145-
}
146-
100%{
147-
transform: translateX(-50%) scale(1);
148-
animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
149-
opacity: 0;
150-
}
151-
}
76+
<snackbar-actions>
77+
<button>Action</button>
78+
<close-button>
79+
<svg />
80+
</close-button>
81+
</snackbar-actions>
82+
</snackbar-component>
15283
```

‎docs/assets/Notify.js‎

Lines changed: 0 additions & 117 deletions
This file was deleted.

0 commit comments

Comments
 (0)