react-toast-msg 2.3.0 → 2.5.5
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 +43 -20
- package/dist/index.d.mts +11 -7
- package/dist/index.d.ts +11 -7
- package/dist/index.js +1 -2
- package/dist/index.mjs +1 -2
- package/dist/style.css +1 -0
- package/package.json +18 -10
package/README.md
CHANGED
|
@@ -10,11 +10,33 @@ A lightweight and customizable React toast notification library.
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- Lightweight & fast
|
|
16
|
+
- Tailwind CSS based styling
|
|
17
|
+
- Global & per-toast configuration
|
|
18
|
+
- Multiple toast variants
|
|
19
|
+
- Auto close with animation
|
|
20
|
+
- Manual close button support
|
|
21
|
+
|
|
13
22
|
## Installation
|
|
14
23
|
|
|
15
24
|
```bash
|
|
16
25
|
npm i react-toast-msg
|
|
17
26
|
```
|
|
27
|
+
|
|
28
|
+
## Install Tailwind CSS
|
|
29
|
+
|
|
30
|
+
Make sure you have Tailwind CSS installed in your project.
|
|
31
|
+
|
|
32
|
+
### Import CSS
|
|
33
|
+
|
|
34
|
+
In your global CSS file (e.g., `index.css` or `App.css`), import the library's CSS:
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
@import 'react-toast-msg/style.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
18
40
|
---
|
|
19
41
|
|
|
20
42
|
## Usage
|
|
@@ -27,14 +49,13 @@ import { toast, ToastContainer } from 'react-toast-msg';
|
|
|
27
49
|
export default function Example() {
|
|
28
50
|
return (
|
|
29
51
|
<>
|
|
30
|
-
<ToastContainer autoClose={3000}
|
|
31
|
-
|
|
52
|
+
<ToastContainer autoClose={3000} closeButton={true} />
|
|
32
53
|
<button onClick={() => toast('Default toast')}>Default</button>
|
|
33
54
|
<button onClick={() => toast.success('Success toast')}>Success</button>
|
|
34
|
-
|
|
35
|
-
<button onClick={() => toast.
|
|
36
|
-
|
|
37
|
-
|
|
55
|
+
{/* rest */}
|
|
56
|
+
<button onClick={() => toast.success('Success toast', { duration: 5000, closeButton: false })}>
|
|
57
|
+
Success with duration
|
|
58
|
+
</button>
|
|
38
59
|
</>
|
|
39
60
|
);
|
|
40
61
|
}
|
|
@@ -46,23 +67,25 @@ export default function Example() {
|
|
|
46
67
|
|
|
47
68
|
You can now define a custom timeout per toast.
|
|
48
69
|
|
|
49
|
-
| Usage Example
|
|
50
|
-
|
|
|
51
|
-
| `toast('Message')`
|
|
52
|
-
| `toast('Message', 1000)`
|
|
53
|
-
| `toast.success('Saved'
|
|
54
|
-
| `toast('
|
|
70
|
+
| Usage Example | Description |
|
|
71
|
+
| ----------------------------------------------- | ------------------------------------ |
|
|
72
|
+
| `toast('Message')` | Default timeout |
|
|
73
|
+
| `toast('Message', { duration: 1000 })` | Closes after 1000ms (1 second) |
|
|
74
|
+
| `toast.success('Saved')` | Success toast |
|
|
75
|
+
| `toast.success('Saved', { duration: 5000 })` | Success toast closes after 5 seconds |
|
|
76
|
+
| `toast.error('Error', { closeButton: true })` | Error toast with close button |
|
|
77
|
+
| `toast.warning('Warn', { closeButton: false })` | Warning without close button |
|
|
55
78
|
|
|
56
|
-
>
|
|
79
|
+
> Per-toast options always override ToastContainer defaults.
|
|
57
80
|
|
|
58
81
|
### Example:
|
|
59
82
|
|
|
60
83
|
```jsx
|
|
61
|
-
<button onClick={() => toast('This will close in 1 second', 1000)}>
|
|
84
|
+
<button onClick={() => toast('This will close in 1 second', { duration: 1000 })}>
|
|
62
85
|
Show 1s Toast
|
|
63
86
|
</button>
|
|
64
87
|
|
|
65
|
-
<button onClick={() => toast.success('Success - 5s', 5000)}>
|
|
88
|
+
<button onClick={() => toast.success('Success - 5s', { duration: 5000 })}>
|
|
66
89
|
Show 5s Success Toast
|
|
67
90
|
</button>
|
|
68
91
|
```
|
|
@@ -71,15 +94,15 @@ You can now define a custom timeout per toast.
|
|
|
71
94
|
|
|
72
95
|
## ToastContainer Props
|
|
73
96
|
|
|
74
|
-
| Prop
|
|
75
|
-
|
|
|
76
|
-
| autoClose
|
|
77
|
-
|
|
|
97
|
+
| Prop | Type | Default | Description |
|
|
98
|
+
| ----------- | ------- | ------- | ------------------------------------------------- |
|
|
99
|
+
| autoClose | number | 3000 | Default close time in milliseconds for all toasts |
|
|
100
|
+
| closeButton | boolean | false | Close button visibility for all toasts |
|
|
78
101
|
|
|
79
102
|
Usage:
|
|
80
103
|
|
|
81
104
|
```jsx
|
|
82
|
-
<ToastContainer autoClose={3000}
|
|
105
|
+
<ToastContainer autoClose={3000} closeButton={false} /> // Default
|
|
83
106
|
```
|
|
84
107
|
|
|
85
108
|
---
|
package/dist/index.d.mts
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
type ToastType = 'success' | 'error' | 'warning' | 'default';
|
|
4
|
-
type
|
|
4
|
+
type ToastOptions = {
|
|
5
|
+
type?: ToastType;
|
|
6
|
+
duration?: number;
|
|
7
|
+
closeButton?: boolean;
|
|
8
|
+
};
|
|
5
9
|
interface ToastContainerProps {
|
|
6
10
|
autoClose?: number;
|
|
7
|
-
|
|
11
|
+
closeButton?: boolean;
|
|
8
12
|
}
|
|
9
13
|
|
|
10
|
-
declare function ToastContainer({ autoClose,
|
|
11
|
-
declare function toast(message: string,
|
|
14
|
+
declare function ToastContainer({ autoClose, closeButton }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function toast(message: string, options?: ToastOptions): void;
|
|
12
16
|
declare namespace toast {
|
|
13
|
-
var success: (message: string,
|
|
14
|
-
var error: (message: string,
|
|
15
|
-
var warning: (message: string,
|
|
17
|
+
var success: (message: string, options?: ToastOptions) => void;
|
|
18
|
+
var error: (message: string, options?: ToastOptions) => void;
|
|
19
|
+
var warning: (message: string, options?: ToastOptions) => void;
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
export { ToastContainer, type ToastType, toast };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
type ToastType = 'success' | 'error' | 'warning' | 'default';
|
|
4
|
-
type
|
|
4
|
+
type ToastOptions = {
|
|
5
|
+
type?: ToastType;
|
|
6
|
+
duration?: number;
|
|
7
|
+
closeButton?: boolean;
|
|
8
|
+
};
|
|
5
9
|
interface ToastContainerProps {
|
|
6
10
|
autoClose?: number;
|
|
7
|
-
|
|
11
|
+
closeButton?: boolean;
|
|
8
12
|
}
|
|
9
13
|
|
|
10
|
-
declare function ToastContainer({ autoClose,
|
|
11
|
-
declare function toast(message: string,
|
|
14
|
+
declare function ToastContainer({ autoClose, closeButton }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function toast(message: string, options?: ToastOptions): void;
|
|
12
16
|
declare namespace toast {
|
|
13
|
-
var success: (message: string,
|
|
14
|
-
var error: (message: string,
|
|
15
|
-
var warning: (message: string,
|
|
17
|
+
var success: (message: string, options?: ToastOptions) => void;
|
|
18
|
+
var error: (message: string, options?: ToastOptions) => void;
|
|
19
|
+
var warning: (message: string, options?: ToastOptions) => void;
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
export { ToastContainer, type ToastType, toast };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var
|
|
3
|
-
`);var f=require("react");function m(t){return t?t.split(" ").filter(Boolean).map(o=>`rtm-${o}`).join(" "):""}var h=require("react/jsx-runtime");function y({message:t,type:o="default",icon:e,leaving:n,position:r}){return(0,h.jsxs)("div",{className:m(`toast toast-${o} ${n?"toast-exit":"toast-enter"}-${r}`),children:[e,t]})}var a=require("react/jsx-runtime"),b=({size:t=24,strokeWidth:o=2})=>(0,a.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,a.jsx)("circle",{cx:12,cy:12,r:10}),(0,a.jsx)("path",{d:"m9 12 2 2 4-4"})]}),w=({size:t=24,strokeWidth:o=2})=>(0,a.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,a.jsx)("circle",{cx:12,cy:12,r:10}),(0,a.jsx)("path",{d:"m15 9-6 6"}),(0,a.jsx)("path",{d:"m9 9 6 6"})]}),T=({size:t=24,strokeWidth:o=2})=>(0,a.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,a.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,a.jsx)("path",{d:"M12 9v4"}),(0,a.jsx)("path",{d:"M12 17h.01"})]});var l=require("react/jsx-runtime");function v(t){switch(t){case"success":return(0,l.jsx)(b,{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[e,n]=(0,f.useState)([]);return(0,f.useEffect)(()=>{p=(r,x="default",E)=>{let d=Date.now(),I=E||t;n(i=>[...i,{id:d,message:r,type:x,leaving:!1}]),setTimeout(()=>{n(i=>i.map(c=>c.id===d?{...c,leaving:!0}:c)),setTimeout(()=>{n(i=>i.filter(c=>c.id!==d))},400)},I)}},[t,o]),(0,g.jsx)("div",{className:m(`toast-container toast-container-${o}`),children:e.map(r=>(0,g.jsx)(y,{message:r.message,type:r.type,icon:v(r.type),leaving:r.leaving,position:o},r.id))})}function s(t,o,e){p&&(typeof o=="number"?p(t,"default",o):p(t,o,e))}s.success=(t,o)=>s(t,"success",o);s.error=(t,o)=>s(t,"error",o);s.warning=(t,o)=>s(t,"warning",o);0&&(module.exports={ToastContainer,toast});
|
|
2
|
+
"use strict";var O=Object.create;var d=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var s in e)d(t,s,{get:e[s],enumerable:!0})},b=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of S(e))!E.call(t,o)&&o!==s&&d(t,o,{get:()=>e[o],enumerable:!(r=R(e,o))||r.enumerable});return t};var F=(t,e,s)=>(s=t!=null?O(V(t)):{},b(e||!t||!t.__esModule?d(s,"default",{value:t,enumerable:!0}):s,t)),W=t=>b(d({},"__esModule",{value:!0}),t);var q={};k(q,{ToastContainer:()=>L,toast:()=>i});module.exports=W(q);var v=require("react");var f=require("react");var C=require("tailwind-merge"),Z=F(require("clsx"));function n(...t){return(0,C.twMerge)((0,Z.default)(t))}var c=require("react/jsx-runtime");function P({message:t,type:e="default",icon:s,leaving:r,setToasts:o,id:w,closeButton:T}){let[x,p]=(0,f.useState)(!1);(0,f.useEffect)(()=>{requestAnimationFrame(()=>p(!0))},[]);let m=()=>{p(!1),setTimeout(()=>{o==null||o(h=>h.filter(a=>a.id!==w))},300)};return(0,c.jsxs)("div",{className:n("pointer-events-auto relative flex max-w-80 min-w-62 items-center gap-1 rounded-lg border border-gray-200/70 bg-white py-3 text-sm text-zinc-800 transition-all duration-300 ease-out",x&&!r?"translate-y-0 opacity-100":"translate-y-10 opacity-0",e==="default"?"px-4":"px-3"),children:[s,t,T&&(0,c.jsx)("button",{onClick:m,className:"absolute -top-2 -right-2 cursor-pointer rounded-full border border-gray-200/70 bg-white p-px text-zinc-500",children:(0,c.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor",className:"size-3",children:(0,c.jsx)("path",{d:"M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"})})})]})}var l=require("react/jsx-runtime"),z=({className:t})=>(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:n("size-5.5",t),height:24,width:24,children:(0,l.jsx)("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",clipRule:"evenodd"})}),M=({className:t})=>(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:n("size-5.5",t),height:24,width:24,children:(0,l.jsx)("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",clipRule:"evenodd"})}),N=({className:t})=>(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:n("size-5.5",t),height:24,width:24,children:(0,l.jsx)("path",{fillRule:"evenodd",d:"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",clipRule:"evenodd"})});var g=require("react/jsx-runtime");function B(t){switch(t){case"success":return(0,g.jsx)(z,{});case"error":return(0,g.jsx)(M,{});case"warning":return(0,g.jsx)(N,{});default:return null}}var I=require("react/jsx-runtime"),y=null;function L({autoClose:t=3e3,closeButton:e=!1}){let[s,r]=(0,v.useState)([]);return(0,v.useEffect)(()=>{y=(o,w={})=>{let{type:T="default",duration:x,closeButton:p}=w,m=Date.now(),h=x||t;r(a=>[...a,{id:m,message:o,type:T,leaving:!1,closeButton:p!=null?p:e}]),setTimeout(()=>{r(a=>a.map(u=>u.id===m?{...u,leaving:!0}:u)),setTimeout(()=>{r(a=>a.filter(u=>u.id!==m))},300)},h)}},[t,e]),(0,I.jsx)("div",{className:n("pointer-events-none fixed inset-0 z-9999 flex flex-col items-end justify-end gap-2 p-4 text-sm"),children:s.map(o=>(0,I.jsx)(P,{id:o.id,message:o.message,setToasts:r,type:o.type,icon:B(o.type),leaving:o.leaving,closeButton:o.closeButton},o.id))})}function i(t,e){y&&y(t,e)}i.success=(t,e)=>i(t,{...e,type:"success"});i.error=(t,e)=>i(t,{...e,type:"error"});i.warning=(t,e)=>i(t,{...e,type:"warning"});0&&(module.exports={ToastContainer,toast});
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
function
|
|
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:e,leaving:s,position:r}){return E("div",{className:m(`toast toast-${o} ${s?"toast-exit":"toast-enter"}-${r}`),children:[e,t]})}import{jsx as a,jsxs as f}from"react/jsx-runtime";var 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",children:[a("circle",{cx:12,cy:12,r:10}),a("path",{d:"m9 12 2 2 4-4"})]}),y=({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:[a("circle",{cx:12,cy:12,r:10}),a("path",{d:"m15 9-6 6"}),a("path",{d:"m9 9 6 6"})]}),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",className:"lucide lucide-triangle-alert-icon lucide-triangle-alert",children:[a("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"}),a("path",{d:"M12 9v4"}),a("path",{d:"M12 17h.01"})]});import{jsx as d}from"react/jsx-runtime";function b(t){switch(t){case"success":return d(x,{size:20});case"error":return d(y,{size:20});case"warning":return d(h,{size:18});default:return null}}import{jsx as w}from"react/jsx-runtime";var l=null;function B({autoClose:t=3e3,position:o="top-right"}){let[e,s]=I([]);return L(()=>{l=(r,u="default",T)=>{let p=Date.now(),v=T||t;s(i=>[...i,{id:p,message:r,type:u,leaving:!1}]),setTimeout(()=>{s(i=>i.map(c=>c.id===p?{...c,leaving:!0}:c)),setTimeout(()=>{s(i=>i.filter(c=>c.id!==p))},400)},v)}},[t,o]),w("div",{className:m(`toast-container toast-container-${o}`),children:e.map(r=>w(g,{message:r.message,type:r.type,icon:b(r.type),leaving:r.leaving,position:o},r.id))})}function n(t,o,e){l&&(typeof o=="number"?l(t,"default",o):l(t,o,e))}n.success=(t,o)=>n(t,"success",o);n.error=(t,o)=>n(t,"error",o);n.warning=(t,o)=>n(t,"warning",o);export{B as ToastContainer,n as toast};
|
|
2
|
+
import{useState as B,useEffect as L}from"react";import{useEffect as z,useState as M}from"react";import{twMerge as Z}from"tailwind-merge";import P from"clsx";function s(...t){return Z(P(t))}import{jsx as v,jsxs as N}from"react/jsx-runtime";function x({message:t,type:o="default",icon:m,leaving:i,setToasts:e,id:u,closeButton:d}){let[f,a]=M(!1);z(()=>{requestAnimationFrame(()=>a(!0))},[]);let p=()=>{a(!1),setTimeout(()=>{e==null||e(g=>g.filter(r=>r.id!==u))},300)};return N("div",{className:s("pointer-events-auto relative flex max-w-80 min-w-62 items-center gap-1 rounded-lg border border-gray-200/70 bg-white py-3 text-sm text-zinc-800 transition-all duration-300 ease-out",f&&!i?"translate-y-0 opacity-100":"translate-y-10 opacity-0",o==="default"?"px-4":"px-3"),children:[m,t,d&&v("button",{onClick:p,className:"absolute -top-2 -right-2 cursor-pointer rounded-full border border-gray-200/70 bg-white p-px text-zinc-500",children:v("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor",className:"size-3",children:v("path",{d:"M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"})})})]})}import{jsx as l}from"react/jsx-runtime";var h=({className:t})=>l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:s("size-5.5",t),height:24,width:24,children:l("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",clipRule:"evenodd"})}),y=({className:t})=>l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:s("size-5.5",t),height:24,width:24,children:l("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",clipRule:"evenodd"})}),I=({className:t})=>l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:s("size-5.5",t),height:24,width:24,children:l("path",{fillRule:"evenodd",d:"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",clipRule:"evenodd"})});import{jsx as w}from"react/jsx-runtime";function b(t){switch(t){case"success":return w(h,{});case"error":return w(y,{});case"warning":return w(I,{});default:return null}}import{jsx as C}from"react/jsx-runtime";var T=null;function O({autoClose:t=3e3,closeButton:o=!1}){let[m,i]=B([]);return L(()=>{T=(e,u={})=>{let{type:d="default",duration:f,closeButton:a}=u,p=Date.now(),g=f||t;i(r=>[...r,{id:p,message:e,type:d,leaving:!1,closeButton:a!=null?a:o}]),setTimeout(()=>{i(r=>r.map(c=>c.id===p?{...c,leaving:!0}:c)),setTimeout(()=>{i(r=>r.filter(c=>c.id!==p))},300)},g)}},[t,o]),C("div",{className:s("pointer-events-none fixed inset-0 z-9999 flex flex-col items-end justify-end gap-2 p-4 text-sm"),children:m.map(e=>C(x,{id:e.id,message:e.message,setToasts:i,type:e.type,icon:b(e.type),leaving:e.leaving,closeButton:e.closeButton},e.id))})}function n(t,o){T&&T(t,o)}n.success=(t,o)=>n(t,{...o,type:"success"});n.error=(t,o)=>n(t,{...o,type:"error"});n.warning=(t,o)=>n(t,{...o,type:"warning"});export{O as ToastContainer,n as toast};
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@source '.';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-toast-msg",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.5",
|
|
4
4
|
"description": "A lightweight, customizable React toast notification library with zero-config and fast setup.",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -8,19 +8,20 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"dev": "tsup --watch",
|
|
10
10
|
"prettier": "prettier --write src",
|
|
11
|
-
"build": "
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"printWidth": 120,
|
|
15
|
-
"semi": true,
|
|
16
|
-
"tabWidth": 4,
|
|
17
|
-
"singleQuote": true,
|
|
18
|
-
"trailingComma": "none",
|
|
19
|
-
"arrowParens": "avoid"
|
|
11
|
+
"build": "pnpm build:ts && pnpm build:css",
|
|
12
|
+
"build:ts": "tsup",
|
|
13
|
+
"build:css": "pnpx @tailwindcss/cli -i ./src/style.css -o ./dist/style.css"
|
|
20
14
|
},
|
|
21
15
|
"main": "dist/index.js",
|
|
22
16
|
"module": "dist/index.mjs",
|
|
23
17
|
"types": "dist/index.d.ts",
|
|
18
|
+
"exports": {
|
|
19
|
+
".": {
|
|
20
|
+
"import": "./dist/index.mjs",
|
|
21
|
+
"require": "./dist/index.js"
|
|
22
|
+
},
|
|
23
|
+
"./style.css": "./dist/style.css"
|
|
24
|
+
},
|
|
24
25
|
"keywords": [
|
|
25
26
|
"react",
|
|
26
27
|
"toast",
|
|
@@ -47,11 +48,18 @@
|
|
|
47
48
|
"react-dom": "^18 || ^19"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
51
|
+
"@tailwindcss/cli": "^4.1.18",
|
|
50
52
|
"@types/react": "^19.2.2",
|
|
51
53
|
"@types/react-dom": "^19.2.2",
|
|
52
54
|
"@vitejs/plugin-react": "^4.3.4",
|
|
53
55
|
"prettier": "^3.6.2",
|
|
56
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
57
|
+
"tailwindcss": "^4.1.18",
|
|
54
58
|
"tsup": "^8.5.0",
|
|
55
59
|
"typescript": "^5.9.3"
|
|
60
|
+
},
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"clsx": "^2.1.1",
|
|
63
|
+
"tailwind-merge": "^3.4.0"
|
|
56
64
|
}
|
|
57
65
|
}
|