react-strawberry-toast 1.6.2 → 2.1.0-alpha.1
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/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/dist/style2.css +1 -1
- package/dist/style3.css +1 -1
- package/package.json +4 -9
- package/README.md +0 -78
package/dist/index.d.mts
CHANGED
|
@@ -93,9 +93,8 @@ interface ToastContainerProps {
|
|
|
93
93
|
reverse?: boolean;
|
|
94
94
|
gap?: number;
|
|
95
95
|
pauseOnActivate?: boolean;
|
|
96
|
-
limit?: number;
|
|
97
96
|
}
|
|
98
|
-
declare function ToastContainer({ className, style,
|
|
97
|
+
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
99
98
|
|
|
100
99
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
101
100
|
|
package/dist/index.d.ts
CHANGED
|
@@ -93,9 +93,8 @@ interface ToastContainerProps {
|
|
|
93
93
|
reverse?: boolean;
|
|
94
94
|
gap?: number;
|
|
95
95
|
pauseOnActivate?: boolean;
|
|
96
|
-
limit?: number;
|
|
97
96
|
}
|
|
98
|
-
declare function ToastContainer({ className, style,
|
|
97
|
+
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
99
98
|
|
|
100
99
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
101
100
|
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var
|
|
2
|
+
"use strict";var B=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var pt=Object.prototype.hasOwnProperty;var dt=(t,s)=>{for(var e in s)B(t,e,{get:s[e],enumerable:!0})},ut=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of lt(s))!pt.call(t,l)&&l!==e&&B(t,l,{get:()=>s[l],enumerable:!(c=ct(s,l))||c.enumerable});return t};var mt=t=>ut(B({},"__esModule",{value:!0}),t);var yt={};dt(yt,{ToastContainer:()=>vt,toast:()=>a,toastStore:()=>h,useToasts:()=>Y});module.exports=mt(yt);var q=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var k=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var m=require("react/jsx-runtime");function Tt(){return(0,m.jsxs)("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[(0,m.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z"}),(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1dca82"})]})}function J({fill:t}){return(0,m.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function ft(){return(0,m.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function K(){return(0,m.jsx)("svg",{fill:"#8b8b8b",strokeWidth:"0",viewBox:"0 0 512 512",height:"15px",width:"15px",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var T={success:(0,m.jsx)(Tt,{}),error:(0,m.jsx)(J,{fill:"#eb2639"}),loading:(0,m.jsx)("div",{className:`${p}__loading`}),warn:(0,m.jsx)(ft,{}),info:(0,m.jsx)(J,{fill:"#5365e7"})};var Q=t=>{let s=r=>{let o=t.toastTimers.get(r);clearTimeout(o),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,o=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(n=>n.toastId!==r),t.setState([...t.state])},o),s(r))},v=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,o,n)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...n,updated:new Date().getTime(),data:o}:i),t.setState([...t.state])},y=r=>{let o=new Date().getTime();t.state=t.state.map(n=>n.toastId===r?{...n,pausedAt:o}:n),s(r)},u=(r,o)=>{let n=setTimeout(()=>{var w;t.state=t.state.map(b=>b.toastId===r?{...b,isVisible:!1}:b),t.setState([...t.state]);let i=(w=t.state.find(b=>b.toastId===r))==null?void 0:w.removeTimeOut;l(r,i)},o>2147483647?2147483647:o);t.toastTimers.set(r,n)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let o=t.state.find(i=>i.toastId===r);if(!o)return;let n=o.createdAt+(o.timeOut||3e3)-(o.pausedAt||0);u(r,n)},pause:y,replace:d,remove:l,allClear:v}};var h=new k,ht=q(),E=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:v=!0,toastId:d,className:y,style:u,target:f,closeButton:r}=e,o=d||ht();if(a.isActive(o))throw new Error("A duplicate custom ID is not available.");let n=new Date().getTime(),i={updated:null,pausedAt:null,className:y||null,style:u||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:c>2147483647?2147483647:c,toastId:o,data:s,createdAt:n,toastType:t,pauseOnHover:v,removeTimeOut:l,closeButton:r||!1,target:f||null,isVisible:!0};return h.state.push(i),h.setState([...h.state]),o},a=(t,s={})=>E()(t,s),A=Q(h);a.setActive=A.setActive;a.isActive=A.isActive;a.disappear=A.disappear;a.resume=A.resume;a.pause=A.pause;a.replace=A.replace;a.remove=A.remove;a.allClear=A.allClear;a.success=E("success");a.error=E("error");a.warn=E("warn");a.info=E("info");a.loading=E("loading");a.custom=E("custom");a.promise=(t,s,e={})=>{let{loading:c,success:l,error:v}=s,d=a.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>a.disappear(d,0),immediatelyClose:()=>{a.disappear(d,0),a.remove(d,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:!0},u=e.timeOut||=3e3;t.then(f=>{a.replace(d,typeof l=="function"?l(f,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(f=>{a.replace(d,typeof v=="function"?v(f,y):v,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var _=require("react");var Z=require("react");function tt({condition:t,children:s}){let e=Z.Children.toArray(s);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(c=>t?c.key===".0":c.key===".1")}function et({children:t}){return t}function st({children:t}){return t}var ot=({isVisible:t,position:s})=>s?t?/top/i.test(s)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(s)?`${p}__fade-out-reverse`:`${p}__fade-out`:t?`${p}__fade-in`:`${p}__fade-out`;var P=require("react"),L=(t,s)=>{let e=(0,P.useRef)(s);(0,P.useEffect)(()=>{e.current=s},[s]),(0,P.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var g=require("react/jsx-runtime"),O=new Map;function U({toastProps:t}){let s=(0,_.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:v,className:d,style:y,icon:u,pauseOnActivate:f,updated:r,toastType:o,position:n,data:i,pauseOnHover:w,closeButton:b,samePositionLists:H,gap:x,order:C,target:N}=t,X=ot({isVisible:c,position:n}),F=typeof i=="function"?i({toastId:e,close:()=>a.disappear(e,0),immediatelyClose:()=>{a.disappear(e,0),a.remove(e,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:c}):i,rt=()=>{f&&a.resume(e)},nt=()=>{f&&a.pause(e)},G=()=>{N&&requestAnimationFrame(()=>{if(s.current){let M=N.element.getBoundingClientRect(),[D,W]=N.offset||[0,0];s.current.style.top=`${M.y+W+window.scrollY}px`,s.current.style.left=`${M.x+D+window.scrollX}px`}})};L("focus",rt),L("blur",nt),L("resize",G),(0,_.useEffect)(()=>{a.isActive(e)||(a.setActive(e),a.disappear(e,l)),G()},[e]),(0,_.useEffect)(()=>{if(s.current&&!N){let M=O.get(e)||s.current.getBoundingClientRect().height;O.set(e,M);let D=/left/.test(n)?50:/center/.test(n)?0:-50,W=/bottom/.test(n)?0:1,it=H.filter((z,$)=>$<=C-W).reduce((z,$)=>/bottom/.test(n)?z-=x+(O.get($.toastId)||0):z+=x+(O.get($.toastId)||0),0);s.current.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",s.current.style.transform=`translate(${D}%, ${it}px)`}return()=>{O.delete(e)}},[C]),(0,_.useEffect)(()=>{r!==null&&a.disappear(e,l)},[r]);let j=u||(o==="custom"||o==="default"?null:T[o]);return(0,g.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"data-testid":`container-${v||"default"}`,onMouseEnter:()=>{w&&a.pause(e)},onMouseLeave:()=>{w&&a.resume(e)},children:(0,g.jsxs)(tt,{condition:o!=="custom",children:[(0,g.jsx)(et,{children:(0,g.jsxs)("div",{className:d??`${p}__toast-content ${p}__toast-${o} ${a.isActive(e)?"":X}`,style:y,children:[j&&(0,g.jsx)("span",{className:`${p}__toast-icon`,children:j}),F,b&&(0,g.jsx)("button",{"data-testid":`${e}__close-button`,className:`${p}__close-button`,onClick:()=>{a.disappear(e,0)},type:"button",children:(0,g.jsx)(K,{})})]})}),(0,g.jsx)(st,{children:(0,g.jsx)("div",{className:d??`${a.isActive(e)?"":X}`,children:F})})]})})}var at=require("react");var Y=()=>(0,at.useSyncExternalStore)(h.subscribe.bind(h),h.getSnapShot.bind(h),h.getSnapShot.bind(h));var I=require("react/jsx-runtime");function vt({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:v=!1,pauseOnActivate:d=!0}){let y=Y(),u=o=>{var n;return(n=o.target)==null?void 0:n.element},f=o=>c?o.containerId===c:!o.containerId,r=y.filter(o=>!u(o)).reduce((o,n)=>{let i=n.position||e;return n.position=i,o[i]=o[i]||[],o[i].push(n),o},{});return(0,I.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[y.filter(u).filter(f).map((o,n,i)=>{let w=Object.assign(o,{gap:l,order:n,samePositionLists:i,pauseOnActivate:d});return(0,I.jsx)(U,{toastProps:w},o.toastId)}),Object.entries(r).map(([o,n])=>{let i=n.filter(f),w=v?i.reverse():i;return(0,I.jsx)("div",{"data-testid":o,className:`${p}__z9999 ${t??`${p}__toast-container ${p}__${o}`}`,style:s,children:w.map((b,H,x)=>{let C=Object.assign(b,{gap:l,order:H,samePositionLists:x,pauseOnActivate:d});return(0,I.jsx)(U,{toastProps:C},b.toastId)})},o)})]})}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var
|
|
2
|
+
var F=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var N=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(a){return this.listeners.add(a),()=>{this.listeners.delete(a)}}setState(a){this.state=typeof a=="function"?a(this.state):a,this.listeners.forEach(s=>s())}getSnapShot(){return this.state}};var c="react-strawberry-toast";import{jsx as m,jsxs as ct}from"react/jsx-runtime";function nt(){return ct("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[m("path",{stroke:"none",d:"M0 0h24v24H0z"}),m("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1dca82"})]})}function G({fill:t}){return m("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:m("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function it(){return m("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:m("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function j(){return m("svg",{fill:"#8b8b8b",strokeWidth:"0",viewBox:"0 0 512 512",height:"15px",width:"15px",xmlns:"http://www.w3.org/2000/svg",children:m("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var T={success:m(nt,{}),error:m(G,{fill:"#eb2639"}),loading:m("div",{className:`${c}__loading`}),warn:m(it,{}),info:m(G,{fill:"#5365e7"})};var q=t=>{let a=r=>{let e=t.toastTimers.get(r);clearTimeout(e),t.toastTimers.delete(r)},s=r=>{t.activatedToasts.add(r)},l=r=>t.activatedToasts.has(r),u=(r,e=200)=>{l(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(n=>n.toastId!==r),t.setState([...t.state])},e),a(r))},h=()=>{t.state.forEach(r=>{d(r.toastId,0)})},p=(r,e,n)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...n,updated:new Date().getTime(),data:e}:i),t.setState([...t.state])},v=r=>{let e=new Date().getTime();t.state=t.state.map(n=>n.toastId===r?{...n,pausedAt:e}:n),a(r)},d=(r,e)=>{let n=setTimeout(()=>{var S;t.state=t.state.map(g=>g.toastId===r?{...g,isVisible:!1}:g),t.setState([...t.state]);let i=(S=t.state.find(g=>g.toastId===r))==null?void 0:S.removeTimeOut;u(r,i)},e>2147483647?2147483647:e);t.toastTimers.set(r,n)};return{setActive:s,isActive:l,disappear:d,resume:r=>{if(t.toastTimers.has(r))return;let e=t.state.find(i=>i.toastId===r);if(!e)return;let n=e.createdAt+(e.timeOut||3e3)-(e.pausedAt||0);d(r,n)},pause:v,replace:p,remove:u,allClear:h}};var y=new N,lt=F(),A=(t="default")=>(a,s={})=>{let{timeOut:l=3e3,removeTimeOut:u=200,pauseOnHover:h=!0,toastId:p,className:v,style:d,target:f,closeButton:r}=s,e=p||lt();if(o.isActive(e))throw new Error("A duplicate custom ID is not available.");let n=new Date().getTime(),i={updated:null,pausedAt:null,className:v||null,style:d||{},icon:s.icon||null,containerId:s.containerId||null,position:s.position||null,timeOut:l>2147483647?2147483647:l,toastId:e,data:a,createdAt:n,toastType:t,pauseOnHover:h,removeTimeOut:u,closeButton:r||!1,target:f||null,isVisible:!0};return y.state.push(i),y.setState([...y.state]),e},o=(t,a={})=>A()(t,a),w=q(y);o.setActive=w.setActive;o.isActive=w.isActive;o.disappear=w.disappear;o.resume=w.resume;o.pause=w.pause;o.replace=w.replace;o.remove=w.remove;o.allClear=w.allClear;o.success=A("success");o.error=A("error");o.warn=A("warn");o.info=A("info");o.loading=A("loading");o.custom=A("custom");o.promise=(t,a,s={})=>{let{loading:l,success:u,error:h}=a,p=o.loading(l,{...s,timeOut:2147483647}),v={toastId:p,close:()=>o.disappear(p,0),immediatelyClose:()=>{o.disappear(p,0),o.remove(p,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:!0},d=s.timeOut||=3e3;t.then(f=>{o.replace(p,typeof u=="function"?u(f,v):u,{...s,timeOut:d>2147483647?2147483647:d,toastType:"success"})}).catch(f=>{o.replace(p,typeof h=="function"?h(f,v):h,{...s,timeOut:d>2147483647?2147483647:d,toastType:"error"})})};import{useEffect as W,useRef as ut}from"react";import{Children as pt}from"react";function J({condition:t,children:a}){let s=pt.toArray(a);if(s.length>2)throw new Error("The number of children exceeds two.");return s.find(l=>t?l.key===".0":l.key===".1")}function K({children:t}){return t}function Q({children:t}){return t}var Z=({isVisible:t,position:a})=>a?t?/top/i.test(a)?`${c}__fade-in`:`${c}__fade-in-reverse`:/bottom/i.test(a)?`${c}__fade-out-reverse`:`${c}__fade-out`:t?`${c}__fade-in`:`${c}__fade-out`;import{useEffect as tt,useRef as dt}from"react";var $=(t,a)=>{let s=dt(a);tt(()=>{s.current=a},[a]),tt(()=>(window.addEventListener(t,s.current),()=>{window.removeEventListener(t,s.current)}),[t])};import{jsx as E,jsxs as et}from"react/jsx-runtime";var _=new Map;function z({toastProps:t}){let a=ut(null),{toastId:s,isVisible:l,timeOut:u,containerId:h,className:p,style:v,icon:d,pauseOnActivate:f,updated:r,toastType:e,position:n,data:i,pauseOnHover:S,closeButton:g,samePositionLists:k,gap:I,order:P,target:O}=t,V=Z({isVisible:l,position:n}),U=typeof i=="function"?i({toastId:s,close:()=>o.disappear(s,0),immediatelyClose:()=>{o.disappear(s,0),o.remove(s,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:l}):i,ot=()=>{f&&o.resume(s)},at=()=>{f&&o.pause(s)},Y=()=>{O&&requestAnimationFrame(()=>{if(a.current){let x=O.element.getBoundingClientRect(),[R,L]=O.offset||[0,0];a.current.style.top=`${x.y+L+window.scrollY}px`,a.current.style.left=`${x.x+R+window.scrollX}px`}})};$("focus",ot),$("blur",at),$("resize",Y),W(()=>{o.isActive(s)||(o.setActive(s),o.disappear(s,u)),Y()},[s]),W(()=>{if(a.current&&!O){let x=_.get(s)||a.current.getBoundingClientRect().height;_.set(s,x);let R=/left/.test(n)?50:/center/.test(n)?0:-50,L=/bottom/.test(n)?0:1,rt=k.filter((H,C)=>C<=P-L).reduce((H,C)=>/bottom/.test(n)?H-=I+(_.get(C.toastId)||0):H+=I+(_.get(C.toastId)||0),0);a.current.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",a.current.style.transform=`translate(${R}%, ${rt}px)`}return()=>{_.delete(s)}},[P]),W(()=>{r!==null&&o.disappear(s,u)},[r]);let X=d||(e==="custom"||e==="default"?null:T[e]);return E("output",{role:"status",ref:a,className:`${c}__toast-content-container`,"data-testid":`container-${h||"default"}`,onMouseEnter:()=>{S&&o.pause(s)},onMouseLeave:()=>{S&&o.resume(s)},children:et(J,{condition:e!=="custom",children:[E(K,{children:et("div",{className:p??`${c}__toast-content ${c}__toast-${e} ${o.isActive(s)?"":V}`,style:v,children:[X&&E("span",{className:`${c}__toast-icon`,children:X}),U,g&&E("button",{"data-testid":`${s}__close-button`,className:`${c}__close-button`,onClick:()=>{o.disappear(s,0)},type:"button",children:E(j,{})})]})}),E(Q,{children:E("div",{className:p??`${o.isActive(s)?"":V}`,children:U})})]})})}import{useSyncExternalStore as mt}from"react";var st=()=>mt(y.subscribe.bind(y),y.getSnapShot.bind(y),y.getSnapShot.bind(y));import{jsx as B,jsxs as Tt}from"react/jsx-runtime";function Jt({className:t,style:a,position:s="top-center",containerId:l="",gap:u=9,reverse:h=!1,pauseOnActivate:p=!0}){let v=st(),d=e=>{var n;return(n=e.target)==null?void 0:n.element},f=e=>l?e.containerId===l:!e.containerId,r=v.filter(e=>!d(e)).reduce((e,n)=>{let i=n.position||s;return n.position=i,e[i]=e[i]||[],e[i].push(n),e},{});return Tt("div",{id:`${c}__root`,"data-container-id":l,children:[v.filter(d).filter(f).map((e,n,i)=>{let S=Object.assign(e,{gap:u,order:n,samePositionLists:i,pauseOnActivate:p});return B(z,{toastProps:S},e.toastId)}),Object.entries(r).map(([e,n])=>{let i=n.filter(f),S=h?i.reverse():i;return B("div",{"data-testid":e,className:`${c}__z9999 ${t??`${c}__toast-container ${c}__${e}`}`,style:a,children:S.map((g,k,I)=>{let P=Object.assign(g,{gap:u,order:k,samePositionLists:I,pauseOnActivate:p});return B(z,{toastProps:P},g.toastId)})},e)})]})}export{Jt as ToastContainer,o as toast,y as toastStore,st as useToasts};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px 2px 6px 2px #0000001a;min-height:47px;max-width:368px}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:15px;height:15px;cursor:pointer}
|
package/dist/style2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px 10px 10px 15px;display:flex;align-items:center;gap:5px;width:314px;border-radius:8px;box-shadow:2px
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;background-color:#fff;padding:10px 10px 10px 15px;display:flex;align-items:center;gap:5px;width:314px;border-radius:8px;box-shadow:2px 2px 6px 2px #0000001a;min-height:54px;max-width:368px;position:relative}.react-strawberry-toast__toast-success:before{content:"";display:inline-block;top:0;left:0;width:7px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#1dca82}.react-strawberry-toast__toast-error:before{content:"";display:inline-block;top:0;left:0;width:7px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#eb2639}.react-strawberry-toast__toast-warn:before{content:"";display:inline-block;top:0;left:0;width:7px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#fcba03}.react-strawberry-toast__toast-info:before{content:"";display:inline-block;top:0;left:0;width:7px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#5365e7}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:15px;height:15px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}
|
package/dist/style3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;padding:10px;display:flex;align-items:center;gap:5px;width:314px;border-radius:8px;box-shadow:2px
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:16px;left:calc(-50% + 16px)}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:calc(-50% + 16px)}.react-strawberry-toast__bottom-left{bottom:8px;left:calc(-50% + 16px)}.react-strawberry-toast__bottom-center{bottom:8px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:8px;right:calc(-50% + 16px)}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{pointer-events:auto;box-sizing:border-box;padding:10px;display:flex;align-items:center;gap:5px;width:314px;border-radius:8px;box-shadow:2px 2px 6px 2px #0000001a;min-height:54px;max-width:368px;position:relative;background-color:#fff}.react-strawberry-toast__toast-success{color:#fff;background-color:#1dca82}.react-strawberry-toast__toast-error{color:#fff;background-color:#eb2639}.react-strawberry-toast__toast-warn{color:#fff;background-color:#fcba03}.react-strawberry-toast__toast-info{color:#fff;background-color:#5365e7}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:15px;height:15px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}svg .react-strawberry-toast-path{fill:#fff}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-strawberry-toast",
|
|
3
3
|
"description": "A simple and customizable React toast library",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "2.1.0-alpha.1",
|
|
5
5
|
"author": "dkpark10",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -14,11 +14,13 @@
|
|
|
14
14
|
],
|
|
15
15
|
"repository": {
|
|
16
16
|
"type": "git",
|
|
17
|
-
"url": "https://github.com/dkpark10/react-strawberry-toast.git"
|
|
17
|
+
"url": "https://github.com/dkpark10/react-strawberry-toast.git",
|
|
18
|
+
"directory": "packages/react-strawberry-toast"
|
|
18
19
|
},
|
|
19
20
|
"bugs": {
|
|
20
21
|
"url": "https://github.com/dkpark10/react-strawberry-toast/issues"
|
|
21
22
|
},
|
|
23
|
+
"homepage": "https://dkpark10.github.io/react-strawberry-toast/",
|
|
22
24
|
"main": "./dist/index.js",
|
|
23
25
|
"types": "./dist/index.d.ts",
|
|
24
26
|
"exports": {
|
|
@@ -50,19 +52,13 @@
|
|
|
50
52
|
"dist"
|
|
51
53
|
],
|
|
52
54
|
"scripts": {
|
|
53
|
-
"dev": "pnpm run --filter=react-strawberry-toast-playground dev",
|
|
54
|
-
"dev:docs": "pnpm run --filter=react-strawberry-toast-docs dev",
|
|
55
|
-
"deploy:docs": "pnpm run --filter=react-strawberry-toast-docs deploy",
|
|
56
55
|
"build": "tsup",
|
|
57
56
|
"test": "vitest",
|
|
58
57
|
"test:e2e": "npx playwright test",
|
|
59
58
|
"test:e2e:ui": "npx playwright test --ui",
|
|
60
|
-
"prepare": "husky install",
|
|
61
59
|
"deploy": "pnpm run test --run && pnpm run test:e2e && pnpm run build && npm publish --access=public"
|
|
62
60
|
},
|
|
63
61
|
"devDependencies": {
|
|
64
|
-
"@commitlint/cli": "^19.6.1",
|
|
65
|
-
"@commitlint/config-conventional": "^19.6.0",
|
|
66
62
|
"@playwright/test": "^1.50.1",
|
|
67
63
|
"@testing-library/jest-dom": "^6.6.3",
|
|
68
64
|
"@testing-library/react": "^15.0.7",
|
|
@@ -71,7 +67,6 @@
|
|
|
71
67
|
"@types/react-dom": "^18",
|
|
72
68
|
"concurrently": "^9.1.0",
|
|
73
69
|
"esbuild-sass-plugin": "^3.3.1",
|
|
74
|
-
"husky": "^8",
|
|
75
70
|
"jsdom": "^24.0.0",
|
|
76
71
|
"playwright": "^1.50.1",
|
|
77
72
|
"react": "^18",
|
package/README.md
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# React-Strawberry-Toast
|
|
2
|
-
|
|
3
|
-
A simple and customizable React toast library
|
|
4
|
-
|
|
5
|
-
## Documentation
|
|
6
|
-
|
|
7
|
-
For more detailed information, please refer to the official [Documentation](https://dkpark10.github.io/react-strawberry-toast/)
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm i --save react-strawberry-toast
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
yarn add react-strawberry-toast
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
pnpm i --save react-strawberry-toast
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Usage
|
|
24
|
-
|
|
25
|
-
```jsx
|
|
26
|
-
import { ToastContainer, toast } from 'react-strawberry-toast';
|
|
27
|
-
import 'react-strawberry-toast/dist/style.css';
|
|
28
|
-
|
|
29
|
-
function App() {
|
|
30
|
-
const click = () => {
|
|
31
|
-
toast('hello strawberry toast');
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<>
|
|
36
|
-
<ToastContainer />
|
|
37
|
-
<button type='button' onClick={click}>click</button>
|
|
38
|
-
</>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## API
|
|
44
|
-
|
|
45
|
-
### <ToastContainer />
|
|
46
|
-
|
|
47
|
-
| Option | Description | Type | Default |
|
|
48
|
-
|:-----------|:-----------|:-----------|:-----------|
|
|
49
|
-
| position | Global toast's Position | top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | top-center |
|
|
50
|
-
| containerId | ToastContainer's unique id | String | |
|
|
51
|
-
| reverse | Direction when toast appear | Boolean | false |
|
|
52
|
-
| className | Class of ToastContainer | String | |
|
|
53
|
-
| style | Style of ToastContainer | Object | |
|
|
54
|
-
| gap | Gap Between toasts | Number | 9 |
|
|
55
|
-
| pauseOnActivate | Pause Toast timer when blur events occurs | Boolean | true |
|
|
56
|
-
| limit | Limit the number of toast to be displayed | Number | |
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
### toast
|
|
60
|
-
|
|
61
|
-
| Option | Description | Type | Default |
|
|
62
|
-
|:-----------|:-----------|:-----------|:-----------|
|
|
63
|
-
| toastId | Toast's unique Id | String | |
|
|
64
|
-
| position | Position per toast | top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | top-center |
|
|
65
|
-
| containerId | ID shown in the Toast Container Unique ID | String | |
|
|
66
|
-
| pauseOnHover | Option that sets the timer to stop or not when a hover event occurs | Boolean | true |
|
|
67
|
-
| icon | The icon to be displayed in the toast | ReactNode | |
|
|
68
|
-
| timeOut | Time for toast to disappear | Number | 3000 |
|
|
69
|
-
| removeTimeOut | Time for toast to remove In Toast List | Number | 200 |
|
|
70
|
-
| className | Class of toast | String | |
|
|
71
|
-
| style | Style of toast | Object | |
|
|
72
|
-
| target | Target element where toast will be located | Object | |
|
|
73
|
-
| closeButton | Option to show or hide the close button | Boolean | false |
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
## License
|
|
77
|
-
|
|
78
|
-
MIT
|