Skip to content

Commit 8c40900

Browse files
author
Kyle Andrews
committed
Closes #4 - updates readme
1 parent f617d84 commit 8c40900

File tree

1 file changed

+59
-17
lines changed

1 file changed

+59
-17
lines changed

README.md

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,74 @@ Download Notify.js via NPM:
1010
npm i --save @codewithkyle/notifyjs
1111
```
1212

13-
Once the package is installed import the package:
13+
## Usage
14+
15+
There are two ways to use this package. You can create a Notification Manager or use the global manager. Each manager has a queue and new notifications are placed in the queue in the order that they're requested. The queue can be skipped by settings the `force` value to true.
16+
17+
### Global Manager
18+
19+
Import the global `notify()` function:
1420

1521
```typescript
16-
import { NotificationManager } from "@codewithkyle/notifyjs";
22+
import { notify } from "@codewithkyle/notifyjs";
1723
```
1824

19-
Then it's as simple as creating a new instance of the class and calling the `notify()` method:
25+
Submit a notification to the global manager:
2026

2127
```typescript
22-
const notificationManager = new NotificationManager();
23-
notificationManager.notify({
28+
notify({
2429
message: "All notifications require a message",
2530
});
2631
```
2732

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.
33+
### Custom Manager
34+
35+
Import the `NotificationManager` class:
2936

3037
```typescript
31-
notificationManager.notify({
32-
message: "This message will close the current notification and will jump the queue",
33-
force: true,
38+
import { NotificationManager } from "@codewithkyle/notifyjs";
39+
```
40+
41+
Create a new instance of the class:
42+
43+
```typescript
44+
const customManager = new NotificationManager();
45+
```
46+
47+
Call the `notify()` method:
48+
49+
```typescript
50+
customManager.notify({
51+
message: "All notifications require a message",
3452
});
3553
```
3654

3755
## Notification Options
3856

57+
```typescript
58+
interface NotificationOptions {
59+
message: string;
60+
duration?: number;
61+
closeable?: boolean;
62+
buttons?: Array<{
63+
label: string;
64+
callback: Function;
65+
ariaLabel?: string;
66+
classes?: Array<string> | string;
67+
}>;
68+
force?: boolean;
69+
classes?: Array<string> | string;
70+
}
71+
```
72+
3973
### Duration
4074

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.
75+
The duration value can be set to `Infinity` if a users interaction is required. Otherwise enter the number of seconds the notification should be displayed for.
4276

4377
```typescript
44-
notificationManager.notify({
45-
message: "The user will have to close this notification",
46-
duration: Infinity,
47-
closeable: true,
78+
notify({
79+
message: "This notification will last 3 seconds",
80+
duration: 3,
4881
});
4982
```
5083

@@ -53,10 +86,8 @@ notificationManager.notify({
5386
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.
5487

5588
```typescript
56-
notificationManager.notify({
89+
notify({
5790
message: "A new version of this application is available",
58-
duration: Infinity,
59-
closeable: true,
6091
buttons: [
6192
{
6293
label: "Update",
@@ -68,6 +99,17 @@ notificationManager.notify({
6899
});
69100
```
70101

102+
### Closeable
103+
104+
Notifications can be closeable by setting the `closeable` value to true.
105+
106+
```typescript
107+
notify({
108+
message: "The user will have to close this notification",
109+
closeable: true,
110+
});
111+
```
112+
71113
## HTML Structure
72114

73115
```html

0 commit comments

Comments
 (0)