Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-web-notify

Package Overview
Dependencies
Maintainers
0
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-web-notify - npm Package Compare versions

Comparing version
2.0.0
 to
2.0.1
+9
LICENSE
MIT License
Copyright (c)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+74
Readme.md
# React Web Notify
React-Wen-Notify is a highly customizable notification widget component built with React. It allows to have simple and easy web notifications in a web application.
## Features
- Easy to use
- Emoji / Icon support
- Lightweight
- Customizable duration
- Text-based feedback collection.
- Customizable position
- Allows multiple notifications
- Simple animations
## Installation
- You can install the widget from npm by running:
`npm install react-web-notify`
- Usage
To start using the react-web-notify widget in your project, import it and use it within your components.
```
import React from 'react';
import webNotify from "react-web-notify";
function App() {
const handleShowNotification = () => {
webNotify({
type: "success",
position: "top-right",
duration: 5000,
title: "This is notification title",
message: "This is notification message",
});
};
return (
<div>
<button onClick={handleShowNotification}>Show Notification</button>
</div>
);
}
export default App;
```
## Props Configuration
- `type`:
- - `success`: For showing success notification.
- - `error`: For showing error notification.
- - `warning`: For showing warning notification.
- - `info`: For showing information based notification.
- `position`: Position of the notification on the screen. Available positions:
- - `bottom-right`
- - `bottom-center`
- - `bottom-left`
- - `top-right`
- - `top-center`
- - `top-left`
- `duration`: default is 5000 ms
- `title`: Title of the notification
- `message`: Notification message
- `titleIcon`: Default title icons are : ✅ for success | ❌ for error | ⚠️ for warning | ℹ️ for info. Add a title icon to replace the existing one.
## Contributing
If you want to contribute to this project, feel free to submit pull requests or open issues for suggestions and bug reports.
## License
This project is licensed under the MIT License. See the LICENSE file for details.
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg) 
+1
-1
package.json
{
"name": "react-web-notify",
"version": "2.0.0",
"version": "2.0.1",
"description": "A react plugin to show notifications in a simple way.",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

+1
-1
src/index.jsx

@@ -63,3 +63,3 @@ import React, { useEffect, useState } from "react";

return (
<div className={`notification-container ${notificationPosition}`}>
<div className={`rwn-notification-container ${notificationPosition}`}>
{notifications.map(

@@ -66,0 +66,0 @@ ({ id, type, position, title, message, titleIcon, duration }) => (

+11
-11
src/WebNotify.css
/* Dynamic positioning based on the selected position */
.notification-container {
.rwn-notification-container {
position: fixed;

@@ -10,3 +10,3 @@ z-index: 9999;

.notification-container.top-right {
.rwn-notification-container.top-right {
top: 20px;

@@ -16,3 +16,3 @@ right: 20px;

.notification-container.top-center {
.rwn-notification-container.top-center {
top: 20px;

@@ -23,3 +23,3 @@ left: 50%;

.notification-container.top-left {
.rwn-notification-container.top-left {
top: 20px;

@@ -29,3 +29,3 @@ left: 20px;

.notification-container.bottom-right {
.rwn-notification-container.bottom-right {
bottom: 20px;

@@ -35,3 +35,3 @@ right: 20px;

.notification-container.bottom-center {
.rwn-notification-container.bottom-center {
bottom: 20px;

@@ -42,3 +42,3 @@ left: 50%;

.notification-container.bottom-left {
.rwn-notification-container.bottom-left {
bottom: 20px;

@@ -48,3 +48,3 @@ left: 20px;

.notification {
.rwn-notification {
display: flex;

@@ -62,3 +62,3 @@ align-items: center;

/* Icon and text styling */
.icon {
.rwn-icon {
margin-right: 12px;

@@ -68,3 +68,3 @@ font-size: 24px;

.title {
.rwn-title {
font-weight: bold;

@@ -74,3 +74,3 @@ margin-bottom: 4px;

.message {
.rwn-message {
font-size: 14px;

@@ -77,0 +77,0 @@ }

+4
-4
src/WebNotify.jsx

@@ -37,8 +37,8 @@ import React, { useState, useEffect } from "react";

return (
<div className={`notification ${type} ${position}`}>
<div className={`rwn-notification ${type} ${position}`}>
{/* Use dynamic titleIcon if provided, otherwise fallback to default */}
<span className="icon">{titleIcon || getDefaultIcon(type)}</span>
<span className="rwn-icon">{titleIcon || getDefaultIcon(type)}</span>
<div>
<div className="title">{title}</div>
<div className="message">{message}</div>
<div className="rwn-title">{title}</div>
<div className="rwn-message">{message}</div>
</div>

@@ -45,0 +45,0 @@ </div>