react-toast-msg 2.1.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -19
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +6 -1
package/README.md
CHANGED
|
@@ -6,21 +6,8 @@ A lightweight and customizable React toast notification library.
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
---
|
|
10
|
-
|
|
11
9
|
|
|
12
10
|
|
|
13
|
-
## Features
|
|
14
|
-
|
|
15
|
-
| Feature | Description |
|
|
16
|
-
| ---------------------- | -------------------------------------------- |
|
|
17
|
-
| Lightweight and fast | Minimal dependency and highly performant |
|
|
18
|
-
| Zero configuration | Works instantly with default settings |
|
|
19
|
-
| Custom auto-close time | Set duration per toast dynamically |
|
|
20
|
-
| Multiple toast types | success, error, warning, default |
|
|
21
|
-
| React 18+ support | Fully compatible with React 18 and above |
|
|
22
|
-
| Easy styling | Customize with simple CSS or utility classes |
|
|
23
|
-
|
|
24
11
|
---
|
|
25
12
|
|
|
26
13
|
## Installation
|
|
@@ -28,7 +15,6 @@ A lightweight and customizable React toast notification library.
|
|
|
28
15
|
```bash
|
|
29
16
|
npm i react-toast-msg
|
|
30
17
|
```
|
|
31
|
-
|
|
32
18
|
---
|
|
33
19
|
|
|
34
20
|
## Usage
|
|
@@ -41,7 +27,7 @@ import { toast, ToastContainer } from 'react-toast-msg';
|
|
|
41
27
|
export default function Example() {
|
|
42
28
|
return (
|
|
43
29
|
<>
|
|
44
|
-
<ToastContainer />
|
|
30
|
+
<ToastContainer autoClose={3000} position="top-right" />
|
|
45
31
|
|
|
46
32
|
<button onClick={() => toast('Default toast')}>Default</button>
|
|
47
33
|
<button onClick={() => toast.success('Success toast')}>Success</button>
|
|
@@ -85,14 +71,15 @@ You can now define a custom timeout per toast.
|
|
|
85
71
|
|
|
86
72
|
## ToastContainer Props
|
|
87
73
|
|
|
88
|
-
| Prop | Type | Default
|
|
89
|
-
| --------- | ------ |
|
|
90
|
-
| autoClose | number | 3000
|
|
74
|
+
| Prop | Type | Default | Description |
|
|
75
|
+
| --------- | ------ | ----------- | ------------------------------------------------- |
|
|
76
|
+
| autoClose | number | 3000 | Default close time in milliseconds for all toasts |
|
|
77
|
+
| position | string | 'top-right' | Position of the toast container |
|
|
91
78
|
|
|
92
79
|
Usage:
|
|
93
80
|
|
|
94
81
|
```jsx
|
|
95
|
-
<ToastContainer autoClose={
|
|
82
|
+
<ToastContainer autoClose={3000} position="top-right" /> // Default
|
|
96
83
|
```
|
|
97
84
|
|
|
98
85
|
---
|
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
type ToastType = 'success' | 'error' | 'warning' | 'default';
|
|
4
|
+
type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
4
5
|
interface ToastContainerProps {
|
|
5
6
|
autoClose?: number;
|
|
7
|
+
position?: ToastPosition;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
declare function ToastContainer({ autoClose }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
declare function ToastContainer({ autoClose, position }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
9
11
|
declare function toast(message: string, type?: ToastType | number, duration?: number): void;
|
|
10
12
|
declare namespace toast {
|
|
11
13
|
var success: (message: string, duration?: number) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
type ToastType = 'success' | 'error' | 'warning' | 'default';
|
|
4
|
+
type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
4
5
|
interface ToastContainerProps {
|
|
5
6
|
autoClose?: number;
|
|
7
|
+
position?: ToastPosition;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
declare function ToastContainer({ autoClose }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
declare function ToastContainer({ autoClose, position }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
9
11
|
declare function toast(message: string, type?: ToastType | number, duration?: number): void;
|
|
10
12
|
declare namespace toast {
|
|
11
13
|
var success: (message: string, duration?: number) => void;
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var u=Object.defineProperty;var
|
|
3
|
-
`);var
|
|
2
|
+
"use strict";var u=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var C=(t,o)=>{for(var r in o)u(t,r,{get:o[r],enumerable:!0})},R=(t,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of z(o))!P.call(t,e)&&e!==r&&u(t,e,{get:()=>o[e],enumerable:!(a=L(o,e))||a.enumerable});return t};var B=t=>R(u({},"__esModule",{value:!0}),t);var N={};C(N,{ToastContainer:()=>k,toast:()=>i});module.exports=B(N);function $(t){if(!t||typeof document=="undefined"||document.getElementById("rtm-style"))return;let o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",r.id="rtm-style",r.appendChild(document.createTextNode(t)),o.appendChild(r)}$(`:root{--white-color: #fff;--default-bg-color: #1e2939;--success-bg-color: #00c950;--error-bg-color: #fb2c36;--warning-bg-color: #f0b100}.rtm-toast-container{position:fixed;font-family:sans-serif;display:flex;flex-direction:column;gap:10px;z-index:9999}.rtm-toast-container-top-right{top:1rem;right:1rem;align-items:flex-end}.rtm-toast-container-top-left{top:1rem;left:1rem;align-items:flex-start}.rtm-toast-container-bottom-right{bottom:1rem;right:1rem;align-items:flex-end;flex-direction:column-reverse}.rtm-toast-container-bottom-left{bottom:1rem;left:1rem;align-items:flex-start;flex-direction:column-reverse}.rtm-toast{display:flex;align-items:center;gap:8px;background:var(--default-bg-color);color:var(--white-color);padding:12px;min-height:44px;font-size:14px;border-radius:8px;min-width:200px;max-width:320px;will-change:transform,opacity}.rtm-toast-success{background:var(--success-bg-color)}.rtm-toast-error{background:var(--error-bg-color)}.rtm-toast-warning{background:var(--warning-bg-color)}.rtm-toast svg{flex-shrink:0}@keyframes toastEnterRight{0%{opacity:0;transform:translate(20px)}60%{opacity:1;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes toastExitRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes toastEnterLeft{0%{opacity:0;transform:translate(-100%)}60%{opacity:1;transform:translate(2px)}to{opacity:1;transform:translate(0)}}@keyframes toastExitLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}.rtm-toast-enter-top-right{animation:toastEnterRight .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-top-right{animation:toastExitRight .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-top-left{animation:toastEnterLeft .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-top-left{animation:toastExitLeft .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-bottom-right{animation:toastEnterRight .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-bottom-right{animation:toastExitRight .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-bottom-left{animation:toastEnterLeft .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-bottom-left{animation:toastExitLeft .4s cubic-bezier(.06,.71,.55,1) forwards}
|
|
3
|
+
`);var f=require("react");function m(t){return t?t.split(" ").filter(Boolean).map(o=>`rtm-${o}`).join(" "):""}var b=require("react/jsx-runtime");function x({message:t,type:o="default",icon:r,leaving:a,position:e}){return(0,b.jsxs)("div",{className:m(`toast toast-${o} ${a?"toast-exit":"toast-enter"}-${e}`),children:[r,t]})}var n=require("react/jsx-runtime"),y=({size:t=24,strokeWidth:o=2})=>(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("circle",{cx:12,cy:12,r:10}),(0,n.jsx)("path",{d:"m9 12 2 2 4-4"})]}),w=({size:t=24,strokeWidth:o=2})=>(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-circle-x-icon lucide-circle-x",children:[(0,n.jsx)("circle",{cx:12,cy:12,r:10}),(0,n.jsx)("path",{d:"m15 9-6 6"}),(0,n.jsx)("path",{d:"m9 9 6 6"})]}),T=({size:t=24,strokeWidth:o=2})=>(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-triangle-alert-icon lucide-triangle-alert",children:[(0,n.jsx)("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),(0,n.jsx)("path",{d:"M12 9v4"}),(0,n.jsx)("path",{d:"M12 17h.01"})]});var l=require("react/jsx-runtime");function v(t){switch(t){case"success":return(0,l.jsx)(y,{size:20});case"error":return(0,l.jsx)(w,{size:20});case"warning":return(0,l.jsx)(T,{size:18});default:return null}}var g=require("react/jsx-runtime"),p=null;function k({autoClose:t=3e3,position:o="top-right"}){let[r,a]=(0,f.useState)([]);return(0,f.useEffect)(()=>{p=(e,h="default",E)=>{let d=Date.now(),I=E||t;a(s=>[...s,{id:d,message:e,type:h,leaving:!1}]),setTimeout(()=>{a(s=>s.map(c=>c.id===d?{...c,leaving:!0}:c)),setTimeout(()=>{a(s=>s.filter(c=>c.id!==d))},400)},I)}},[t,o]),(0,g.jsx)("div",{className:m(`toast-container toast-container-${o}`),children:r.map(e=>(0,g.jsx)(x,{message:e.message,type:e.type,icon:v(e.type),leaving:e.leaving,position:o},e.id))})}function i(t,o,r){p&&(typeof o=="number"?p(t,"default",o):p(t,o,r))}i.success=(t,o)=>i(t,"success",o);i.error=(t,o)=>i(t,"error",o);i.warning=(t,o)=>i(t,"warning",o);0&&(module.exports={ToastContainer,toast});
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
function
|
|
3
|
-
`);import{useState as I,useEffect as
|
|
2
|
+
function k(t){if(!t||typeof document=="undefined"||document.getElementById("rtm-style"))return;let o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",r.id="rtm-style",r.appendChild(document.createTextNode(t)),o.appendChild(r)}k(`:root{--white-color: #fff;--default-bg-color: #1e2939;--success-bg-color: #00c950;--error-bg-color: #fb2c36;--warning-bg-color: #f0b100}.rtm-toast-container{position:fixed;font-family:sans-serif;display:flex;flex-direction:column;gap:10px;z-index:9999}.rtm-toast-container-top-right{top:1rem;right:1rem;align-items:flex-end}.rtm-toast-container-top-left{top:1rem;left:1rem;align-items:flex-start}.rtm-toast-container-bottom-right{bottom:1rem;right:1rem;align-items:flex-end;flex-direction:column-reverse}.rtm-toast-container-bottom-left{bottom:1rem;left:1rem;align-items:flex-start;flex-direction:column-reverse}.rtm-toast{display:flex;align-items:center;gap:8px;background:var(--default-bg-color);color:var(--white-color);padding:12px;min-height:44px;font-size:14px;border-radius:8px;min-width:200px;max-width:320px;will-change:transform,opacity}.rtm-toast-success{background:var(--success-bg-color)}.rtm-toast-error{background:var(--error-bg-color)}.rtm-toast-warning{background:var(--warning-bg-color)}.rtm-toast svg{flex-shrink:0}@keyframes toastEnterRight{0%{opacity:0;transform:translate(20px)}60%{opacity:1;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes toastExitRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes toastEnterLeft{0%{opacity:0;transform:translate(-100%)}60%{opacity:1;transform:translate(2px)}to{opacity:1;transform:translate(0)}}@keyframes toastExitLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}.rtm-toast-enter-top-right{animation:toastEnterRight .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-top-right{animation:toastExitRight .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-top-left{animation:toastEnterLeft .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-top-left{animation:toastExitLeft .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-bottom-right{animation:toastEnterRight .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-bottom-right{animation:toastExitRight .4s cubic-bezier(.06,.71,.55,1) forwards}.rtm-toast-enter-bottom-left{animation:toastEnterLeft .45s cubic-bezier(.21,1.02,.73,1) forwards}.rtm-toast-exit-bottom-left{animation:toastExitLeft .4s cubic-bezier(.06,.71,.55,1) forwards}
|
|
3
|
+
`);import{useState as I,useEffect as L}from"react";function m(t){return t?t.split(" ").filter(Boolean).map(o=>`rtm-${o}`).join(" "):""}import{jsxs as E}from"react/jsx-runtime";function g({message:t,type:o="default",icon:r,leaving:i,position:e}){return E("div",{className:m(`toast toast-${o} ${i?"toast-exit":"toast-enter"}-${e}`),children:[r,t]})}import{jsx as n,jsxs as f}from"react/jsx-runtime";var h=({size:t=24,strokeWidth:o=2})=>f("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",children:[n("circle",{cx:12,cy:12,r:10}),n("path",{d:"m9 12 2 2 4-4"})]}),x=({size:t=24,strokeWidth:o=2})=>f("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-circle-x-icon lucide-circle-x",children:[n("circle",{cx:12,cy:12,r:10}),n("path",{d:"m15 9-6 6"}),n("path",{d:"m9 9 6 6"})]}),b=({size:t=24,strokeWidth:o=2})=>f("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-triangle-alert-icon lucide-triangle-alert",children:[n("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),n("path",{d:"M12 9v4"}),n("path",{d:"M12 17h.01"})]});import{jsx as d}from"react/jsx-runtime";function y(t){switch(t){case"success":return d(h,{size:20});case"error":return d(x,{size:20});case"warning":return d(b,{size:18});default:return null}}import{jsx as w}from"react/jsx-runtime";var l=null;function z({autoClose:t=3e3,position:o="top-right"}){let[r,i]=I([]);return L(()=>{l=(e,u="default",T)=>{let p=Date.now(),v=T||t;i(s=>[...s,{id:p,message:e,type:u,leaving:!1}]),setTimeout(()=>{i(s=>s.map(c=>c.id===p?{...c,leaving:!0}:c)),setTimeout(()=>{i(s=>s.filter(c=>c.id!==p))},400)},v)}},[t,o]),w("div",{className:m(`toast-container toast-container-${o}`),children:r.map(e=>w(g,{message:e.message,type:e.type,icon:y(e.type),leaving:e.leaving,position:o},e.id))})}function a(t,o,r){l&&(typeof o=="number"?l(t,"default",o):l(t,o,r))}a.success=(t,o)=>a(t,"success",o);a.error=(t,o)=>a(t,"error",o);a.warning=(t,o)=>a(t,"warning",o);export{z as ToastContainer,a as toast};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-toast-msg",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.4",
|
|
4
4
|
"description": "A lightweight, customizable React toast notification library with zero-config and fast setup.",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"react-toastify",
|
|
30
30
|
"snackbar",
|
|
31
31
|
"react-toast-msg",
|
|
32
|
+
"rtm",
|
|
32
33
|
"toast-component"
|
|
33
34
|
],
|
|
34
35
|
"author": "SudhuCodes",
|
|
@@ -37,6 +38,10 @@
|
|
|
37
38
|
"type": "git",
|
|
38
39
|
"url": "https://github.com/sudhucodes/react-toast-msg.git"
|
|
39
40
|
},
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://github.com/sudhucodes/react-toast-msg/issues"
|
|
43
|
+
},
|
|
44
|
+
"homepage": "https://github.com/sudhucodes/react-toast-msg",
|
|
40
45
|
"peerDependencies": {
|
|
41
46
|
"react": "^18 || ^19",
|
|
42
47
|
"react-dom": "^18 || ^19"
|