Skip to content

Commit 407cc30

Browse files
author
Manu
committed
first stable release
1 parent 78c2d0a commit 407cc30

13 files changed

Lines changed: 683 additions & 702 deletions

File tree

.babelrc

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

.eslintrc

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

.gitignore

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
.DS_Store
2-
build
3-
node_modules
4-
*.log
51
package-lock.json

.npmigonre

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

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## [1.0.0] 2017-11-24
2+
### Original Release
3+
- Added Reactstrap as base framework
4+
- Added animations from animate-bootstrap-notify

LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Creative Tim
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,126 @@
1-
# react-notification-alert
1+
# React Notification Alert
2+
[![version][version-badge]][CHANGELOG] [![license][license-badge]][LICENSE]
3+
4+
**React Notification Alert** is a component made with [reactstrap components](https://reactstrap.github.io/) and [React](https://reactjs.org/).
5+
6+
## Installation
7+
8+
`npm install --save react-notification-alert`
9+
10+
## Usage
11+
You can import react-notification-alert in your application like so:
12+
13+
`import NotificationAlert from 'react-notification-alert';`
14+
15+
After that, in your component render method add the following line:
16+
17+
`<NotificationAlert ref="notificationAlert" />`
18+
19+
We've used `ref="notificationAlert"` property on the `NotificationAlert` tag to access this components properties.
20+
21+
Somewhere in your component call `notificationAlert(options)` function like:
22+
23+
`this.refs.notificationAlert.notificationAlert(options);`
24+
25+
## *options* parameter
26+
27+
This parameter has to be a javascript object with the following props:
28+
29+
```
30+
var options = {
31+
place: ,
32+
message: ,
33+
type: ,
34+
icon: ,
35+
autoDismiss:
36+
}
37+
```
38+
39+
### *place*
40+
This is where will the notification appear. Can be one of:
41+
1. `tl` - notification will be rendered in the top-left corner of the screen
42+
2. `tc` - notification will be rendered in the top-center corner of the screen
43+
3. `tr` - notification will be rendered in the top-right corner of the screen
44+
4. `bl` - notification will be rendered in the bottom-left corner of the screen
45+
5. `bc` - notification will be rendered in the bottom-center corner of the screen
46+
6. `br` - notification will be rendered in the bottom-right corner of the screen
47+
48+
### *message*
49+
Can be `string` / `node`. This is goind to be the message inside the `notification`.
50+
51+
### *type*
52+
This is the color of the notification and can be one of, according to [reactstrap colors for alerts](https://reactstrap.github.io/components/alerts/):
53+
1. `primary`
54+
2. `secondary`
55+
3. `success`
56+
4. `danger`
57+
5. `warning`
58+
6. `info`
59+
7. `light`
60+
8. `dark`
61+
62+
### *icon*
63+
String used to add an icon to the notification.
64+
65+
### *autoDismiss*
66+
This prop is used to tell the notification after how many **seconds** to auto close.
67+
If is set to a value lower than 0, then the notification will not auto close.
68+
69+
## Example code
70+
71+
```
72+
import React, { Component } from 'react';
73+
import NotificationAlert from 'react-notification-alert';
74+
75+
var options = {};
76+
options = {
77+
place: 'tl',
78+
message: (
79+
<div>
80+
<div>
81+
Welcome to <b>Now UI Dashboard React</b> - a beautiful freebie for every web developer.
82+
</div>
83+
</div>
84+
),
85+
type: "danger",
86+
icon: "now-ui-icons ui-1_bell-53",
87+
autoDismiss: 7
88+
}
89+
90+
class App extends Component {
91+
myFunc(){
92+
this.refs.notify.notificationAlert(options);
93+
}
94+
render() {
95+
return (
96+
<div>
97+
<NotificationAlert ref="notify" />
98+
<button onClick={() => this.myFunc()}>Hey</button>
99+
</div>
100+
);
101+
}
102+
}
103+
104+
export default App;
105+
```
106+
107+
## Dependencies
108+
109+
For this component to work properly you have to have the following libraries installed in your project:
110+
111+
```
112+
`npm install --save reactstrap@next`
113+
`npm install --save [email protected]`
114+
```
115+
Bootstrap will require the following:
116+
```
117+
`npm install --save jquery`
118+
`npm install --save popper.js`
119+
```
120+
121+
122+
[CHANGELOG]: ./CHANGELOG.md
123+
124+
[LICENSE]: ./LICENSE.md
125+
[version-badge]: https://img.shields.io/badge/version-0.0.1-blue.svg
126+
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

0 commit comments

Comments
 (0)