React bootstrap 4 notification alert
npm install react-notification-alertReact Notification Alert is a component made with reactstrap components and React.
npm install --save react-notification-alert
import NotificationAlert from 'react-notification-alert';
After that, in your component render method add the following line:
We've used ref="notificationAlert" property on the NotificationAlert tag to access this components properties.
Somewhere in your component call notificationAlert(options) function like:
this.refs.notificationAlert.notificationAlert(options);
Do not forget to import our styles in your project:
```
import "react-notification-alert/dist/animate.css";
will be set as default.onClick
This function will be called when the user clicks on a certain notification.options parameter
This parameter has to be a javascript object with the following props:
`
var options = {
place: ,
message: ,
type: ,
icon: ,
autoDismiss: ,
closeButton: ,
zIndex: ,
}
`$3
This is where will the notification appear. Can be one of:
1. tl - notification will be rendered in the top-left corner of the screen
2. tc - notification will be rendered in the top-center corner of the screen
3. tr - notification will be rendered in the top-right corner of the screen
4. bl - notification will be rendered in the bottom-left corner of the screen
5. bc - notification will be rendered in the bottom-center corner of the screen
6. br - notification will be rendered in the bottom-right corner of the screen$3
Can be string / node. This is goind to be the message inside the notification.$3
This is the color of the notification and can be one of, according to reactstrap colors for alerts:
1. primary
2. secondary
3. success
4. danger
5. warning
6. info
7. light
8. dark$3
String used to add an icon to the notification.$3
This prop is used to tell the notification after how many seconds to auto close.
If is set to a value lower than or equal to 0, then the notification will not auto close.$3
If this prop is set to false, than no close button will render in the notification.Example code
`
import React, { Component } from 'react';
import NotificationAlert from 'react-notification-alert';var options = {};
options = {
place: 'tl',
message: (
Welcome to Now UI Dashboard React - a beautiful freebie for every web developer.
),
type: "danger",
icon: "now-ui-icons ui-1_bell-53",
autoDismiss: 7
}class App extends Component {
myFunc(){
this.refs.notify.notificationAlert(options);
}
render() {
return (
console.log("hey")} />
);
}
}export default App;
`Dependencies
For this component to work properly you have to have the following libraries installed in your project:
`
npm install --save reactstrap
npm install --save bootstrap
`
Bootstrap will require the following:
`
npm install --save jquery
``
[CHANGELOG]: ./CHANGELOG.md
[LICENSE]: ./LICENSE.md
[version-badge]: https://img.shields.io/badge/version-0.0.13-blue.svg
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg