Gathering detailed insights and metrics for react-toasted-notifications
Installations
npm install react-toasted-notificationsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.20.1
NPM Version
6.14.10
Score
53.6
Supply Chain
87.4
Quality
74.1
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Download Statistics
Total Downloads
1,473
Last Day
2
Last Week
2
Last Month
9
Last Year
166
Bundle Size
62.00 kB
Minified
21.00 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.3
Package Id
react-toasted-notifications@1.1.3
Unpacked Size
38.97 kB
Size
9.66 kB
File Count
12
NPM Version
6.14.10
Node Version
12.20.1
Total Downloads
Cumulative downloads
Total Downloads
1,473
Last Day
0%
2
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
-65.4%
9
Compared to previous month
Last Year
-15.7%
166
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
React toasted notification using hook.
Installation:
1npm i react-toaster-notification --save 2 3# or 4 5yarn add react-toaster-notification
Configuration
On the root of the application.
1import { Notification } from "../src/"; 2// rest of the import 3 4const App = (props) => { 5 return ( 6 <Router> 7 <App /> 8 <Notification /> 9 </Router> 10 ); 11};
When you want to use a notification.
1import { useNotification } from "../src/"; 2// rest of the import 3 4export const Implementation = (props) => { 5 const [Message, action] = useNotification(); 6 7 const handleNotification = () => { 8 action.addNotification({ 9 title: "Warning", 10 message: "Choose more strong password", 11 type: "warning", 12 }); 13 }; 14 15 return ( 16 <p> 17 <button onClick={handleNotification}>Click</button> 18 </p> 19 ); 20};
List of the props global Notification component.
| prop | default | type | function |
|---|---|---|---|
| timeout | 5000 | Number | Global timeout value for notification |
| colors | {...} | Object | See possible default object. |
| position | bottomRight | String | See possible value below. |
| left | undefined | String | Padding left |
| right | undefined | String | Padding right |
| bottom | undefined | String | Padding bottom |
| top | undefined | String | Padding top |
- Possible value for position:
topRight, bottomRight, topLeft, bottomLeft - default color object:
1colors: { 2 error: "#E44D4D", 3 warning: "#F1AC12", 4 info: "#3090FF", 5 success: "#72C51B", 6 }
Configuration object for notification
| key | value | Options |
|---|---|---|
| title | String | " " |
| message | String | " " |
| type | String | possible options: info, success, error, success |
| timeout | Number | default: 5000 |
| OnClose | function | function when notification is removed |
No vulnerabilities found.
No security vulnerabilities found.