Gathering detailed insights and metrics for ts-notification-dialog
Installations
npm install ts-notification-dialogDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.8.0
NPM Version
10.1.0
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
228
Last Day
1
Last Week
1
Last Month
2
Last Year
228
Bundle Size
257.61 kB
Minified
84.03 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.15
Package Id
ts-notification-dialog@0.1.15
Unpacked Size
127.56 kB
Size
42.61 kB
File Count
3
NPM Version
10.1.0
Node Version
20.8.0
Published on
May 07, 2024
Total Downloads
Cumulative downloads
Total Downloads
228
Dependencies
16
ts-notification-dialog
Package to provide a reusable React component designed to display notification messages to users in a styled dialog box. It supports different types of notifications such as success, information, warning, and error, each with its respective icon and styling.
Installation
ts-notification-dialog
ts-notification-dialog is available as an npm package.
npm:
1npm i ts-notification-dialog
yarn:
1yarn add ts-notification-dialog
Getting started with ts-notification-dialog
Example
1import React, { useState } from "react"; 2import NotificationDialog from "ts-notification-dialog"; 3import "./App.css"; 4 5function App() { 6 const [isDialogOpen, setIsDialogOpen] = useState(false); 7 const [notificationType, setNotificationType] = useState(""); 8 const [notificationMessage, setNotificationMessage] = useState(""); 9 10 const openNotificationDialog = (type: string, message: string) => { 11 setNotificationType(type); 12 setNotificationMessage(message); 13 setIsDialogOpen(true); 14 }; 15 16 const closeNotificationDialog = () => { 17 setIsDialogOpen(false); 18 setNotificationType(""); 19 setNotificationMessage(""); 20 }; 21 22 return ( 23 <div className="container"> 24 <h2>Please select any button to display a notification:</h2> 25 <div className="buttonContainer"> 26 <button 27 className="info" 28 onClick={() => 29 openNotificationDialog("info", "This is an information message") 30 } 31 > 32 Show Info Notification 33 </button> 34 </div> 35 <div className="buttonContainer"> 36 <button 37 className="success" 38 onClick={() => 39 openNotificationDialog("success", "Operation successful") 40 } 41 > 42 Show Success Notification 43 </button> 44 </div> 45 <div className="buttonContainer"> 46 <button 47 className="warning" 48 onClick={() => 49 openNotificationDialog("warning", "Warning: Proceed with caution") 50 } 51 > 52 Show Warning Notification 53 </button> 54 </div> 55 <div className="buttonContainer"> 56 <button 57 className="error" 58 onClick={() => openNotificationDialog("error", "An error occurred")} 59 > 60 Show Error Notification 61 </button> 62 </div> 63 64 <NotificationDialog 65 isDialogOpen={isDialogOpen} 66 type={notificationType} 67 message={notificationMessage} 68 onClose={closeNotificationDialog} 69 /> 70 </div> 71 ); 72} 73 74export default App;
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| isDialogOpen | boolean | false | yes | Controls whether the dialog is open or closed. |
| type | string | Yes | The type of notification. Possible values are 'success', 'info', 'warning', or 'error'. | |
| message | string | Yes | The message content to be displayed in the dialog. | |
| onClose | function | Yes | A callback function to be called when the dialog is closed. | |
| submitLabel | string | Close | No | Custom label for the close button. Defaults to 'Close'. |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
No vulnerabilities found.
No security vulnerabilities found.