|
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