diff --git a/404.html b/404.html index 0a1f4e08..f1d9e244 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ React-Toastify - + diff --git a/accessibility/index.html b/accessibility/index.html index d402350b..459472ec 100644 --- a/accessibility/index.html +++ b/accessibility/index.html @@ -4,7 +4,7 @@ Accessibility | React-Toastify - + diff --git a/add-an-undo-action-to-a-toast/index.html b/add-an-undo-action-to-a-toast/index.html index ba45ada8..20c3b7df 100644 --- a/add-an-undo-action-to-a-toast/index.html +++ b/add-an-undo-action-to-a-toast/index.html @@ -4,7 +4,7 @@ Add an undo action to a toast (like Google Drive) | React-Toastify - + diff --git a/addons/use-notification-center/index.html b/addons/use-notification-center/index.html index a30ce42b..d5d2c34a 100644 --- a/addons/use-notification-center/index.html +++ b/addons/use-notification-center/index.html @@ -4,7 +4,7 @@ useNotificationCenter | React-Toastify - + diff --git a/api/collapse-toast/index.html b/api/collapse-toast/index.html index 30867c41..736e1a17 100644 --- a/api/collapse-toast/index.html +++ b/api/collapse-toast/index.html @@ -4,7 +4,7 @@ collapseToast | React-Toastify - + diff --git a/api/css-transition/index.html b/api/css-transition/index.html index d3754980..195d8f60 100644 --- a/api/css-transition/index.html +++ b/api/css-transition/index.html @@ -4,7 +4,7 @@ cssTransition | React-Toastify - + diff --git a/api/toast-container/index.html b/api/toast-container/index.html index ebeca0b3..210c5128 100644 --- a/api/toast-container/index.html +++ b/api/toast-container/index.html @@ -4,7 +4,7 @@ ToastContainer | React-Toastify - + diff --git a/api/toast/index.html b/api/toast/index.html index 46e4504b..969df3b5 100644 --- a/api/toast/index.html +++ b/api/toast/index.html @@ -4,7 +4,7 @@ toast | React-Toastify - + diff --git a/assets/js/4e6962c3.6d0cc02c.js b/assets/js/4e6962c3.6d0cc02c.js new file mode 100644 index 00000000..684d246a --- /dev/null +++ b/assets/js/4e6962c3.6d0cc02c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_toastify_doc=self.webpackChunkreact_toastify_doc||[]).push([[3011],{824:(s,t,o)=>{o.r(t),o.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>r,metadata:()=>e,toc:()=>d});const e=JSON.parse('{"id":"how-to-style","title":"How to style","description":"Read first Use your own component if you haven\'t","source":"@site/docs/how-to-style.mdx","sourceDirName":".","slug":"/how-to-style","permalink":"/react-toastify/how-to-style","draft":false,"unlisted":false,"editUrl":"https://github.com/fkhadra/react-toastify-doc/edit/master/docs/how-to-style.mdx","tags":[],"version":"current","frontMatter":{"id":"how-to-style","title":"How to style","sidebar_label":"How to style \u2728"},"sidebar":"someSidebar","previous":{"title":"Use Your Own Component","permalink":"/react-toastify/use-your-own-component"},"next":{"title":"Positioning toast","permalink":"/react-toastify/positioning-toast"}}');var n=o(5105),a=o(9621),i=o(4637);const r={id:"how-to-style",title:"How to style",sidebar_label:"How to style \u2728"},c=void 0,l={},d=[{value:"Bring your own component",id:"bring-your-own-component",level:2},{value:"Custom progress bar",id:"custom-progress-bar",level:2},{value:"Override css variables",id:"override-css-variables",level:2},{value:"Override existing css classes",id:"override-existing-css-classes",level:2},{value:"Passing css classes to component",id:"passing-css-classes-to-component",level:2},{value:"Css classes as function",id:"css-classes-as-function",level:2},{value:"How to style with styled-components",id:"how-to-style-with-styled-components",level:2},{value:"Extend existing css classes",id:"extend-existing-css-classes",level:3},{value:"Pass css classes to props",id:"pass-css-classes-to-props",level:3},{value:"Mobile",id:"mobile",level:2}];function f(s){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.admonition,{title:"Important",type:"important",children:(0,n.jsxs)(t.p,{children:["Read first ",(0,n.jsx)(t.a,{href:"/use-your-own-component",children:"Use your own component"})," if you haven't"]})}),"\n",(0,n.jsx)(t.h2,{id:"bring-your-own-component",children:"Bring your own component"}),"\n",(0,n.jsx)(t.p,{children:"This is by far the most flexible and the best approach when you need to fully customize the notifications. As you can see, you can accomplish a lot."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"customization FTW",src:o(4290).A+"",width:"1240",height:"857"})}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["Head to ",(0,n.jsx)(t.a,{href:"https://stackblitz.com/edit/react-toastify-how-to-style?file=src%2FApp.tsx",children:"stackblitz"})," to check the code."]})}),"\n",(0,n.jsx)(t.p,{children:"Let's review together the one with the split buttons for example. I'm using tailwind, but you can write your own css of course."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"split buttons",src:o(1397).A+"",width:"824",height:"186"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'import { ToastContainer, ToastContentProps, toast } from \'react-toastify\';\n\nexport default function App() {\n const notify = () => {\n toast(SplitButtons, {\n closeButton: false,\n // remove the padding on the toast wrapper\n // make it 400px width\n // add a thin purple border because I like purple\n className: \'p-0 w-[400px] border border-purple-600/40\',\n ariaLabel: \'Email received\',\n });\n };\n\n return (\n
\n \n \n
\n );\n}\n\n\nfunction SplitButtons({ closeToast }: ToastContentProps) {\n return (\n // using a grid with 3 columns \n
\n
\n

Email Received

\n

You received a new email from somebody

\n
\n {/* that\'s the vertical line which separate the text and the buttons*/}\n
\n
\n {/*specifying a custom closure reason that can be used with the onClose callback*/}\n \n
\n {/*specifying a custom closure reason that can be used with the onClose callback*/}\n \n
\n
\n );\n}\n'})}),"\n",(0,n.jsx)(t.h2,{id:"custom-progress-bar",children:"Custom progress bar"}),"\n",(0,n.jsxs)(t.p,{children:["When rendering your custom component, the ",(0,n.jsx)(t.code,{children:"isPaused"})," prop is injected. It let you know when you should play or pause your animation for the progress bar."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"function App() {\n const notify = () => {\n toast(CustomComponent, {\n autoClose: 8000,\n // removes the built-in progress bar\n customProgressBar: true\n });\n };\n\n return (\n
\n \n \n
\n );\n}\n\n// isPaused is now available in your component\n// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...\nfunction CustomComponent({ isPaused, closeToast }: ToastContentProps) {\n return (\n
\n Hello\n closeToast()} />\n
\n );\n}\n"})}),"\n",(0,n.jsx)(i.C,{url:"https://stackblitz.com/edit/react-toastify-custom-progress-bar"}),"\n",(0,n.jsx)(t.h2,{id:"override-css-variables",children:"Override css variables"}),"\n",(0,n.jsx)(t.p,{children:"Below the list of the css variables that are exposed by the library."}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-css",children:":root {\n --toastify-color-light: #fff;\n --toastify-color-dark: #121212;\n --toastify-color-info: #3498db;\n --toastify-color-success: #07bc0c;\n --toastify-color-warning: #f1c40f;\n --toastify-color-error: hsl(6, 78%, 57%);\n --toastify-color-transparent: rgba(255, 255, 255, 0.7);\n \n --toastify-icon-color-info: var(--toastify-color-info);\n --toastify-icon-color-success: var(--toastify-color-success);\n --toastify-icon-color-warning: var(--toastify-color-warning);\n --toastify-icon-color-error: var(--toastify-color-error);\n \n --toastify-container-width: fit-content;\n --toastify-toast-width: 320px;\n --toastify-toast-offset: 16px;\n --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));\n --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));\n --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));\n --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));\n --toastify-toast-background: #fff;\n --toastify-toast-padding: 14px;\n --toastify-toast-min-height: 64px;\n --toastify-toast-max-height: 800px;\n --toastify-toast-bd-radius: 6px;\n --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n --toastify-font-family: sans-serif;\n --toastify-z-index: 9999;\n --toastify-text-color-light: #757575;\n --toastify-text-color-dark: #fff;\n\n /* Used only for colored theme */\n --toastify-text-color-info: #fff;\n --toastify-text-color-success: #fff;\n --toastify-text-color-warning: #fff;\n --toastify-text-color-error: #fff;\n\n --toastify-spinner-color: #616161;\n --toastify-spinner-color-empty-area: #e0e0e0;\n --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n --toastify-color-progress-dark: #bb86fc;\n --toastify-color-progress-info: var(--toastify-color-info);\n --toastify-color-progress-success: var(--toastify-color-success);\n --toastify-color-progress-warning: var(--toastify-color-warning);\n --toastify-color-progress-error: var(--toastify-color-error);\n /* used to control the opacity of the progress trail */\n --toastify-color-progress-bgo: 0.2;\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"override-existing-css-classes",children:"Override existing css classes"}),"\n",(0,n.jsx)(t.p,{children:"If overriding the css variables and using your own component are not enough for you, you can override the existing CSS classes. Below, a list of the CSS classes used."}),"\n",(0,n.jsx)(t.admonition,{title:"Info",type:"info",children:(0,n.jsx)(t.p,{children:"Classes used for animation and media query are omitted."})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-css",children:"/** Used to define container behavior: width, position: fixed etc... **/\n.Toastify__toast-container {\n}\n\n/** Used to define the position of the ToastContainer **/\n.Toastify__toast-container--top-left {\n}\n.Toastify__toast-container--top-center {\n}\n.Toastify__toast-container--top-right {\n}\n.Toastify__toast-container--bottom-left {\n}\n.Toastify__toast-container--bottom-center {\n}\n.Toastify__toast-container--bottom-right {\n}\n\n/** Classes for the displayed toast **/\n.Toastify__toast {\n}\n.Toastify__toast--rtl {\n}\n\n/** Used to position the icon **/\n.Toastify__toast-icon {\n}\n\n/** handle the notification color and the text color based on the theme **/\n.Toastify__toast-theme--dark {\n}\n.Toastify__toast-theme--light {\n}\n.Toastify__toast-theme--colored.Toastify__toast--default {\n}\n.Toastify__toast-theme--colored.Toastify__toast--info {\n}\n.Toastify__toast-theme--colored.Toastify__toast--success {\n}\n.Toastify__toast-theme--colored.Toastify__toast--warning {\n}\n.Toastify__toast-theme--colored.Toastify__toast--error {\n}\n\n.Toastify__progress-bar {\n}\n.Toastify__progress-bar--rtl {\n}\n.Toastify__progress-bar-theme--light {\n}\n.Toastify__progress-bar-theme--dark {\n}\n.Toastify__progress-bar--info {\n}\n.Toastify__progress-bar--success {\n}\n.Toastify__progress-bar--warning {\n}\n.Toastify__progress-bar--error {\n}\n/** colored notifications share the same progress bar color **/\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n}\n\n/** Classes for the close button. Better use your own closeButton **/\n.Toastify__close-button {\n}\n.Toastify__close-button--default {\n}\n.Toastify__close-button > svg {\n}\n.Toastify__close-button:hover,\n.Toastify__close-button:focus {\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"passing-css-classes-to-component",children:"Passing css classes to component"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"ToastContainer"})," accept the following props for styling:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"className: applied to the container"}),"\n",(0,n.jsx)(t.li,{children:"toastClassName: applied on the toast wrapper"}),"\n",(0,n.jsx)(t.li,{children:"progressClassName: applied on the progress bar"}),"\n"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'\n'})}),"\n",(0,n.jsx)(t.p,{children:"When displaying a notification you can also set some css classes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["className: applied on the toast wrapper (this override ",(0,n.jsx)(t.code,{children:"toastClassName"})," is set by the container )"]}),"\n",(0,n.jsxs)(t.li,{children:["progressClassName: applied on the progress bar (this override ",(0,n.jsx)(t.code,{children:"progressClassName"})," is set by the container )"]}),"\n"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'toast("Custom style", {\n className: "black-background",\n progressClassName: "fancy-progress-bar",\n});\n'})}),"\n",(0,n.jsx)(t.h2,{id:"css-classes-as-function",children:"Css classes as function"}),"\n",(0,n.jsx)(t.p,{children:"You can also provide a function. This is what it looks like with tailwind css"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'const contextClass = {\n success: "bg-blue-600",\n error: "bg-red-600",\n info: "bg-gray-600",\n warning: "bg-orange-400",\n default: "bg-indigo-600",\n dark: "bg-white-600 font-gray-300",\n};\n\nconst App = () => {\n return (\n <>\n
\n \n contextClass[context?.type || "default"] +\n " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"\n }\n position="bottom-left"\n autoClose={3000}\n />\n \n );\n};\n'})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-style-with-styled-components",children:"How to style with styled-components"}),"\n",(0,n.jsx)(t.h3,{id:"extend-existing-css-classes",children:"Extend existing css classes"}),"\n",(0,n.jsxs)(t.p,{children:["You can override the css classes with ",(0,n.jsx)(t.code,{children:"styled-components"}),". You can find the list of the css classes used ",(0,n.jsx)(t.a,{href:"/react-toastify/how-to-style#override-existing-css-classes",children:"here"}),". This is where you will also define the style for your notification."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'import React from "react";\nimport styled from "styled-components";\nimport { ToastContainer } from "react-toastify";\n\nconst StyledContainer = styled(ToastContainer)`\n // https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n &&&.Toastify__toast-container {\n }\n .Toastify__toast {\n }\n .Toastify__toast-body {\n }\n .Toastify__progress-bar {\n }\n`;\n'})}),"\n",(0,n.jsx)(t.h3,{id:"pass-css-classes-to-props",children:"Pass css classes to props"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'const StyledToastContainer = styled(ToastContainer).attrs({\n className: "toast-container",\n toastClassName: "toast",\n bodyClassName: "body",\n progressClassName: "progress",\n})`\n /* .toast-container */\n width: 100%;\n\n /* .toast is passed to toastClassName */\n .toast {\n background-color: var(--color-black);\n }\n\n button[aria-label="close"] {\n display: none;\n }\n\n /* .body is passed to bodyClassName */\n .body {\n }\n\n /* .progress is passed to progressClassName */\n .progress {\n }\n`;\n'})}),"\n",(0,n.jsx)(t.h2,{id:"mobile",children:"Mobile"}),"\n",(0,n.jsx)(t.p,{children:"On mobile, the toast will take all the available width."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://user-images.githubusercontent.com/5574267/28754040-ae7195ea-753d-11e7-86e1-f23c5e6bc531.gif",alt:"react toastiy mobile"})})]})}function p(s={}){const{wrapper:t}={...(0,a.R)(),...s.components};return t?(0,n.jsx)(t,{...s,children:(0,n.jsx)(f,{...s})}):f(s)}},4637:(s,t,o)=>{o.d(t,{C:()=>n});var e=o(5105);function n(s){let{url:t}=s;return(0,e.jsx)("iframe",{src:t+"?embed=1&file=src%2FApp.tsx&hideExplorer=1&theme=dark&view=preview&hideNavigation=1",style:{width:"100%",height:"600px",border:0,borderRadius:"4px",overflow:"hidden"}})}},4290:(s,t,o)=>{o.d(t,{A:()=>e});const e=o.p+"assets/images/customization-cd456b577c98ddff63db05aa8b9460bd.png"},1397:(s,t,o)=>{o.d(t,{A:()=>e});const e=o.p+"assets/images/split-buttons-9f54edcb32b79cd6917aaa0404276ab3.png"},9621:(s,t,o)=>{o.d(t,{R:()=>i,x:()=>r});var e=o(8101);const n={},a=e.createContext(n);function i(s){const t=e.useContext(a);return e.useMemo((function(){return"function"==typeof s?s(t):{...t,...s}}),[t,s])}function r(s){let t;return t=s.disableParentContext?"function"==typeof s.components?s.components(n):s.components||n:i(s.components),e.createElement(a.Provider,{value:t},s.children)}}}]); \ No newline at end of file diff --git a/assets/js/4e6962c3.a9a4e62d.js b/assets/js/4e6962c3.a9a4e62d.js deleted file mode 100644 index f664307b..00000000 --- a/assets/js/4e6962c3.a9a4e62d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_toastify_doc=self.webpackChunkreact_toastify_doc||[]).push([[3011],{824:(s,t,o)=>{o.r(t),o.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>r,metadata:()=>e,toc:()=>d});const e=JSON.parse('{"id":"how-to-style","title":"How to style","description":"Read first Use your own component if you haven\'t","source":"@site/docs/how-to-style.mdx","sourceDirName":".","slug":"/how-to-style","permalink":"/react-toastify/how-to-style","draft":false,"unlisted":false,"editUrl":"https://github.com/fkhadra/react-toastify-doc/edit/master/docs/how-to-style.mdx","tags":[],"version":"current","frontMatter":{"id":"how-to-style","title":"How to style","sidebar_label":"How to style \u2728"},"sidebar":"someSidebar","previous":{"title":"Use Your Own Component","permalink":"/react-toastify/use-your-own-component"},"next":{"title":"Positioning toast","permalink":"/react-toastify/positioning-toast"}}');var n=o(5105),a=o(9621),i=o(4637);const r={id:"how-to-style",title:"How to style",sidebar_label:"How to style \u2728"},c=void 0,l={},d=[{value:"Bring your own component",id:"bring-your-own-component",level:2},{value:"Custom progress bar",id:"custom-progress-bar",level:2},{value:"Override css variables",id:"override-css-variables",level:2},{value:"Override existing css classes",id:"override-existing-css-classes",level:2},{value:"Passing css classes to component",id:"passing-css-classes-to-component",level:2},{value:"Css classes as function",id:"css-classes-as-function",level:2},{value:"How to style with styled-components",id:"how-to-style-with-styled-components",level:2},{value:"Extend existing css classes",id:"extend-existing-css-classes",level:3},{value:"Pass css classes to props",id:"pass-css-classes-to-props",level:3},{value:"Mobile",id:"mobile",level:2}];function f(s){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.admonition,{title:"Important",type:"important",children:(0,n.jsxs)(t.p,{children:["Read first ",(0,n.jsx)(t.a,{href:"./use-your-own-component",children:"Use your own component"})," if you haven't"]})}),"\n",(0,n.jsx)(t.h2,{id:"bring-your-own-component",children:"Bring your own component"}),"\n",(0,n.jsx)(t.p,{children:"This is by far the most flexible and the best approach when you need to fully customize the notifications. As you can see, you can accomplish a lot."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"customization FTW",src:o(4290).A+"",width:"1240",height:"857"})}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["Head to ",(0,n.jsx)(t.a,{href:"https://stackblitz.com/edit/react-toastify-how-to-style?file=src%2FApp.tsx",children:"stackblitz"})," to check the code."]})}),"\n",(0,n.jsx)(t.p,{children:"Let's review together the one with the split buttons for example. I'm using tailwind, but you can write your own css of course."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"split buttons",src:o(1397).A+"",width:"824",height:"186"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'import { ToastContainer, ToastContentProps, toast } from \'react-toastify\';\n\nexport default function App() {\n const notify = () => {\n toast(SplitButtons, {\n closeButton: false,\n // remove the padding on the toast wrapper\n // make it 400px width\n // add a thin purple border because I like purple\n className: \'p-0 w-[400px] border border-purple-600/40\',\n ariaLabel: \'Email received\',\n });\n };\n\n return (\n
\n \n \n
\n );\n}\n\n\nfunction SplitButtons({ closeToast }: ToastContentProps) {\n return (\n // using a grid with 3 columns \n
\n
\n

Email Received

\n

You received a new email from somebody

\n
\n {/* that\'s the vertical line which separate the text and the buttons*/}\n
\n
\n {/*specifying a custom closure reason that can be used with the onClose callback*/}\n \n
\n {/*specifying a custom closure reason that can be used with the onClose callback*/}\n \n
\n
\n );\n}\n'})}),"\n",(0,n.jsx)(t.h2,{id:"custom-progress-bar",children:"Custom progress bar"}),"\n",(0,n.jsxs)(t.p,{children:["When rendering your custom component, the ",(0,n.jsx)(t.code,{children:"isPaused"})," prop is injected. It let you know when you should play or pause your animation for the progress bar."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"function App() {\n const notify = () => {\n toast(CustomComponent, {\n autoClose: 8000,\n // removes the built-in progress bar\n customProgressBar: true\n });\n };\n\n return (\n
\n \n \n
\n );\n}\n\n// isPaused is now available in your component\n// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...\nfunction CustomComponent({ isPaused, closeToast }: ToastContentProps) {\n return (\n
\n Hello\n closeToast()} />\n
\n );\n}\n"})}),"\n",(0,n.jsx)(i.C,{url:"https://stackblitz.com/edit/react-toastify-custom-progress-bar"}),"\n",(0,n.jsx)(t.h2,{id:"override-css-variables",children:"Override css variables"}),"\n",(0,n.jsx)(t.p,{children:"Below the list of the css variables that are exposed by the library."}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-css",children:":root {\n --toastify-color-light: #fff;\n --toastify-color-dark: #121212;\n --toastify-color-info: #3498db;\n --toastify-color-success: #07bc0c;\n --toastify-color-warning: #f1c40f;\n --toastify-color-error: hsl(6, 78%, 57%);\n --toastify-color-transparent: rgba(255, 255, 255, 0.7);\n \n --toastify-icon-color-info: var(--toastify-color-info);\n --toastify-icon-color-success: var(--toastify-color-success);\n --toastify-icon-color-warning: var(--toastify-color-warning);\n --toastify-icon-color-error: var(--toastify-color-error);\n \n --toastify-container-width: fit-content;\n --toastify-toast-width: 320px;\n --toastify-toast-offset: 16px;\n --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));\n --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));\n --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));\n --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));\n --toastify-toast-background: #fff;\n --toastify-toast-padding: 14px;\n --toastify-toast-min-height: 64px;\n --toastify-toast-max-height: 800px;\n --toastify-toast-bd-radius: 6px;\n --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n --toastify-font-family: sans-serif;\n --toastify-z-index: 9999;\n --toastify-text-color-light: #757575;\n --toastify-text-color-dark: #fff;\n\n /* Used only for colored theme */\n --toastify-text-color-info: #fff;\n --toastify-text-color-success: #fff;\n --toastify-text-color-warning: #fff;\n --toastify-text-color-error: #fff;\n\n --toastify-spinner-color: #616161;\n --toastify-spinner-color-empty-area: #e0e0e0;\n --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n --toastify-color-progress-dark: #bb86fc;\n --toastify-color-progress-info: var(--toastify-color-info);\n --toastify-color-progress-success: var(--toastify-color-success);\n --toastify-color-progress-warning: var(--toastify-color-warning);\n --toastify-color-progress-error: var(--toastify-color-error);\n /* used to control the opacity of the progress trail */\n --toastify-color-progress-bgo: 0.2;\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"override-existing-css-classes",children:"Override existing css classes"}),"\n",(0,n.jsx)(t.p,{children:"If overriding the css variables and using your own component are not enough for you, you can override the existing CSS classes. Below, a list of the CSS classes used."}),"\n",(0,n.jsx)(t.admonition,{title:"Info",type:"info",children:(0,n.jsx)(t.p,{children:"Classes used for animation and media query are omitted."})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-css",children:"/** Used to define container behavior: width, position: fixed etc... **/\n.Toastify__toast-container {\n}\n\n/** Used to define the position of the ToastContainer **/\n.Toastify__toast-container--top-left {\n}\n.Toastify__toast-container--top-center {\n}\n.Toastify__toast-container--top-right {\n}\n.Toastify__toast-container--bottom-left {\n}\n.Toastify__toast-container--bottom-center {\n}\n.Toastify__toast-container--bottom-right {\n}\n\n/** Classes for the displayed toast **/\n.Toastify__toast {\n}\n.Toastify__toast--rtl {\n}\n\n/** Used to position the icon **/\n.Toastify__toast-icon {\n}\n\n/** handle the notification color and the text color based on the theme **/\n.Toastify__toast-theme--dark {\n}\n.Toastify__toast-theme--light {\n}\n.Toastify__toast-theme--colored.Toastify__toast--default {\n}\n.Toastify__toast-theme--colored.Toastify__toast--info {\n}\n.Toastify__toast-theme--colored.Toastify__toast--success {\n}\n.Toastify__toast-theme--colored.Toastify__toast--warning {\n}\n.Toastify__toast-theme--colored.Toastify__toast--error {\n}\n\n.Toastify__progress-bar {\n}\n.Toastify__progress-bar--rtl {\n}\n.Toastify__progress-bar-theme--light {\n}\n.Toastify__progress-bar-theme--dark {\n}\n.Toastify__progress-bar--info {\n}\n.Toastify__progress-bar--success {\n}\n.Toastify__progress-bar--warning {\n}\n.Toastify__progress-bar--error {\n}\n/** colored notifications share the same progress bar color **/\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,\n.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n}\n\n/** Classes for the close button. Better use your own closeButton **/\n.Toastify__close-button {\n}\n.Toastify__close-button--default {\n}\n.Toastify__close-button > svg {\n}\n.Toastify__close-button:hover,\n.Toastify__close-button:focus {\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"passing-css-classes-to-component",children:"Passing css classes to component"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"ToastContainer"})," accept the following props for styling:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"className: applied to the container"}),"\n",(0,n.jsx)(t.li,{children:"toastClassName: applied on the toast wrapper"}),"\n",(0,n.jsx)(t.li,{children:"progressClassName: applied on the progress bar"}),"\n"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'\n'})}),"\n",(0,n.jsx)(t.p,{children:"When displaying a notification you can also set some css classes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["className: applied on the toast wrapper (this override ",(0,n.jsx)(t.code,{children:"toastClassName"})," is set by the container )"]}),"\n",(0,n.jsxs)(t.li,{children:["progressClassName: applied on the progress bar (this override ",(0,n.jsx)(t.code,{children:"progressClassName"})," is set by the container )"]}),"\n"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'toast("Custom style", {\n className: "black-background",\n progressClassName: "fancy-progress-bar",\n});\n'})}),"\n",(0,n.jsx)(t.h2,{id:"css-classes-as-function",children:"Css classes as function"}),"\n",(0,n.jsx)(t.p,{children:"You can also provide a function. This is what it looks like with tailwind css"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'const contextClass = {\n success: "bg-blue-600",\n error: "bg-red-600",\n info: "bg-gray-600",\n warning: "bg-orange-400",\n default: "bg-indigo-600",\n dark: "bg-white-600 font-gray-300",\n};\n\nconst App = () => {\n return (\n <>\n
\n \n contextClass[context?.type || "default"] +\n " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"\n }\n position="bottom-left"\n autoClose={3000}\n />\n \n );\n};\n'})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-style-with-styled-components",children:"How to style with styled-components"}),"\n",(0,n.jsx)(t.h3,{id:"extend-existing-css-classes",children:"Extend existing css classes"}),"\n",(0,n.jsxs)(t.p,{children:["You can override the css classes with ",(0,n.jsx)(t.code,{children:"styled-components"}),". You can find the list of the css classes used ",(0,n.jsx)(t.a,{href:"/react-toastify/how-to-style#override-existing-css-classes",children:"here"}),". This is where you will also define the style for your notification."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'import React from "react";\nimport styled from "styled-components";\nimport { ToastContainer } from "react-toastify";\n\nconst StyledContainer = styled(ToastContainer)`\n // https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n &&&.Toastify__toast-container {\n }\n .Toastify__toast {\n }\n .Toastify__toast-body {\n }\n .Toastify__progress-bar {\n }\n`;\n'})}),"\n",(0,n.jsx)(t.h3,{id:"pass-css-classes-to-props",children:"Pass css classes to props"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:'const StyledToastContainer = styled(ToastContainer).attrs({\n className: "toast-container",\n toastClassName: "toast",\n bodyClassName: "body",\n progressClassName: "progress",\n})`\n /* .toast-container */\n width: 100%;\n\n /* .toast is passed to toastClassName */\n .toast {\n background-color: var(--color-black);\n }\n\n button[aria-label="close"] {\n display: none;\n }\n\n /* .body is passed to bodyClassName */\n .body {\n }\n\n /* .progress is passed to progressClassName */\n .progress {\n }\n`;\n'})}),"\n",(0,n.jsx)(t.h2,{id:"mobile",children:"Mobile"}),"\n",(0,n.jsx)(t.p,{children:"On mobile, the toast will take all the available width."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://user-images.githubusercontent.com/5574267/28754040-ae7195ea-753d-11e7-86e1-f23c5e6bc531.gif",alt:"react toastiy mobile"})})]})}function p(s={}){const{wrapper:t}={...(0,a.R)(),...s.components};return t?(0,n.jsx)(t,{...s,children:(0,n.jsx)(f,{...s})}):f(s)}},4637:(s,t,o)=>{o.d(t,{C:()=>n});var e=o(5105);function n(s){let{url:t}=s;return(0,e.jsx)("iframe",{src:t+"?embed=1&file=src%2FApp.tsx&hideExplorer=1&theme=dark&view=preview&hideNavigation=1",style:{width:"100%",height:"600px",border:0,borderRadius:"4px",overflow:"hidden"}})}},4290:(s,t,o)=>{o.d(t,{A:()=>e});const e=o.p+"assets/images/customization-cd456b577c98ddff63db05aa8b9460bd.png"},1397:(s,t,o)=>{o.d(t,{A:()=>e});const e=o.p+"assets/images/split-buttons-9f54edcb32b79cd6917aaa0404276ab3.png"},9621:(s,t,o)=>{o.d(t,{R:()=>i,x:()=>r});var e=o(8101);const n={},a=e.createContext(n);function i(s){const t=e.useContext(a);return e.useMemo((function(){return"function"==typeof s?s(t):{...t,...s}}),[t,s])}function r(s){let t;return t=s.disableParentContext?"function"==typeof s.components?s.components(n):s.components||n:i(s.components),e.createElement(a.Provider,{value:t},s.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.48548cac.js b/assets/js/runtime~main.27863563.js similarity index 98% rename from assets/js/runtime~main.48548cac.js rename to assets/js/runtime~main.27863563.js index 09090852..e9c6a2e6 100644 --- a/assets/js/runtime~main.48548cac.js +++ b/assets/js/runtime~main.27863563.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,c,t,f,r={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var c=d[e]={id:e,loaded:!1,exports:{}};return r[e].call(c.exports,c,c.exports,b),c.loaded=!0,c.exports}b.m=r,b.c=d,e=[],b.O=(a,c,t,f)=>{if(!c){var r=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](c[o])))?c.splice(o--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[c,t,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var r={};a=a||[null,c({}),c([]),c(c)];for(var d=2&t&&e;"object"==typeof d&&!~a.indexOf(d);d=c(d))Object.getOwnPropertyNames(d).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,b.d(f,r),f},b.d=(e,a)=>{for(var c in a)b.o(a,c)&&!b.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,c)=>(b.f[c](e,a),a)),[])),b.u=e=>"assets/js/"+({502:"66551e45",517:"137632cc",845:"ea9bff1f",922:"52a2c686",957:"c141421f",1235:"a7456010",1385:"af215c62",1665:"662487cb",1812:"ed7d18a1",1995:"40bad94b",2097:"ea41c86b",2138:"1a4e3797",2141:"47daf468",2582:"5da316e4",2789:"bc12798f",2802:"fa4d91bf",3011:"4e6962c3",3143:"3bf1a7d4",3242:"311a8bd5",3296:"a555a233",3302:"c7d214b4",3441:"075e5e16",3832:"d6ebc36d",3890:"956f696f",3922:"0e9fc3fa",4111:"84ea4312",4266:"04e08b13",4395:"52a1d76b",4495:"c5ad6afb",4514:"b51bbbcb",4583:"1df93b7f",4999:"52683d51",5218:"37cd982c",5272:"dbe098d9",5742:"aba21aa0",5899:"a09c2993",5936:"c6ba2324",6245:"c44914c0",6537:"933da07e",6969:"14eb3368",7039:"cfaf49cb",7098:"a7bd4aaa",7850:"c4d948a6",7895:"075623d3",7921:"8933f726",8184:"1a5953a8",8319:"c865f2c7",8376:"82445e8c",8401:"17896441",9048:"a94703ab",9054:"5e929fd7",9185:"f48e05ce",9549:"25a3f8cb",9647:"5e95c892",9883:"52098b02"}[e]||e)+"."+{502:"575a3afb",517:"3c2324b2",845:"c497c80a",922:"ac37098e",957:"60e69376",1235:"5b762da2",1385:"5a99ed20",1665:"a23c752e",1710:"b6403e2a",1812:"35244ad3",1995:"c0d22cf8",2097:"6e55e99d",2138:"a78eb3b5",2141:"6589c627",2582:"a06426e5",2789:"e61e1dd2",2802:"626c9511",3011:"a9a4e62d",3143:"f8f7b283",3242:"9c9ee47c",3296:"425d8f46",3302:"17273b16",3441:"e480b6dd",3832:"f1080cb9",3890:"ba6889d7",3922:"901bd216",4111:"a3b9f43f",4266:"0562ef37",4395:"92372a5f",4495:"eb941ba0",4514:"f69b80d7",4582:"3f590dd0",4583:"adc663c1",4999:"45c088f4",5218:"e3f9e64f",5272:"9e674bb9",5742:"802c68cc",5811:"2a036363",5899:"2a4c4625",5921:"d022cac0",5936:"87f90188",6245:"87ce68d1",6537:"0c148f2c",6969:"6524f107",7039:"a5450704",7098:"2532e78b",7318:"5a5b0364",7850:"b4f2870e",7895:"675c7879",7921:"d73f15f6",8184:"e8230226",8319:"c729ffa3",8376:"79b1c37d",8401:"09c0854b",9048:"5e0fbc19",9054:"605772e3",9185:"54190603",9549:"adacdbfb",9647:"525442db",9883:"6b8e97b8"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},f="react-toastify-doc:",b.l=(e,a,c,r)=>{if(t[e])t[e].push(a);else{var d,o;if(void 0!==c)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(c))),a)return a(c)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/react-toastify/",b.gca=function(e){return e={17896441:"8401","66551e45":"502","137632cc":"517",ea9bff1f:"845","52a2c686":"922",c141421f:"957",a7456010:"1235",af215c62:"1385","662487cb":"1665",ed7d18a1:"1812","40bad94b":"1995",ea41c86b:"2097","1a4e3797":"2138","47daf468":"2141","5da316e4":"2582",bc12798f:"2789",fa4d91bf:"2802","4e6962c3":"3011","3bf1a7d4":"3143","311a8bd5":"3242",a555a233:"3296",c7d214b4:"3302","075e5e16":"3441",d6ebc36d:"3832","956f696f":"3890","0e9fc3fa":"3922","84ea4312":"4111","04e08b13":"4266","52a1d76b":"4395",c5ad6afb:"4495",b51bbbcb:"4514","1df93b7f":"4583","52683d51":"4999","37cd982c":"5218",dbe098d9:"5272",aba21aa0:"5742",a09c2993:"5899",c6ba2324:"5936",c44914c0:"6245","933da07e":"6537","14eb3368":"6969",cfaf49cb:"7039",a7bd4aaa:"7098",c4d948a6:"7850","075623d3":"7895","8933f726":"7921","1a5953a8":"8184",c865f2c7:"8319","82445e8c":"8376",a94703ab:"9048","5e929fd7":"9054",f48e05ce:"9185","25a3f8cb":"9549","5e95c892":"9647","52098b02":"9883"}[e]||e,b.p+b.u(e)},(()=>{var e={5354:0,1869:0};b.f.j=(a,c)=>{var t=b.o(e,a)?e[a]:void 0;if(0!==t)if(t)c.push(t[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((c,f)=>t=e[a]=[c,f]));c.push(t[2]=f);var r=b.p+b.u(a),d=new Error;b.l(r,(c=>{if(b.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var f=c&&("load"===c.type?"missing":c.type),r=c&&c.target&&c.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+r+")",d.name="ChunkLoadError",d.type=f,d.request=r,t[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,c)=>{var t,f,r=c[0],d=c[1],o=c[2],n=0;if(r.some((a=>0!==e[a]))){for(t in d)b.o(d,t)&&(b.m[t]=d[t]);if(o)var i=o(b)}for(a&&a(c);n{"use strict";var e,a,c,t,f,r={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var c=d[e]={id:e,loaded:!1,exports:{}};return r[e].call(c.exports,c,c.exports,b),c.loaded=!0,c.exports}b.m=r,b.c=d,e=[],b.O=(a,c,t,f)=>{if(!c){var r=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](c[o])))?c.splice(o--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[c,t,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var r={};a=a||[null,c({}),c([]),c(c)];for(var d=2&t&&e;"object"==typeof d&&!~a.indexOf(d);d=c(d))Object.getOwnPropertyNames(d).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,b.d(f,r),f},b.d=(e,a)=>{for(var c in a)b.o(a,c)&&!b.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,c)=>(b.f[c](e,a),a)),[])),b.u=e=>"assets/js/"+({502:"66551e45",517:"137632cc",845:"ea9bff1f",922:"52a2c686",957:"c141421f",1235:"a7456010",1385:"af215c62",1665:"662487cb",1812:"ed7d18a1",1995:"40bad94b",2097:"ea41c86b",2138:"1a4e3797",2141:"47daf468",2582:"5da316e4",2789:"bc12798f",2802:"fa4d91bf",3011:"4e6962c3",3143:"3bf1a7d4",3242:"311a8bd5",3296:"a555a233",3302:"c7d214b4",3441:"075e5e16",3832:"d6ebc36d",3890:"956f696f",3922:"0e9fc3fa",4111:"84ea4312",4266:"04e08b13",4395:"52a1d76b",4495:"c5ad6afb",4514:"b51bbbcb",4583:"1df93b7f",4999:"52683d51",5218:"37cd982c",5272:"dbe098d9",5742:"aba21aa0",5899:"a09c2993",5936:"c6ba2324",6245:"c44914c0",6537:"933da07e",6969:"14eb3368",7039:"cfaf49cb",7098:"a7bd4aaa",7850:"c4d948a6",7895:"075623d3",7921:"8933f726",8184:"1a5953a8",8319:"c865f2c7",8376:"82445e8c",8401:"17896441",9048:"a94703ab",9054:"5e929fd7",9185:"f48e05ce",9549:"25a3f8cb",9647:"5e95c892",9883:"52098b02"}[e]||e)+"."+{502:"575a3afb",517:"3c2324b2",845:"c497c80a",922:"ac37098e",957:"60e69376",1235:"5b762da2",1385:"5a99ed20",1665:"a23c752e",1710:"b6403e2a",1812:"35244ad3",1995:"c0d22cf8",2097:"6e55e99d",2138:"a78eb3b5",2141:"6589c627",2582:"a06426e5",2789:"e61e1dd2",2802:"626c9511",3011:"6d0cc02c",3143:"f8f7b283",3242:"9c9ee47c",3296:"425d8f46",3302:"17273b16",3441:"e480b6dd",3832:"f1080cb9",3890:"ba6889d7",3922:"901bd216",4111:"a3b9f43f",4266:"0562ef37",4395:"92372a5f",4495:"eb941ba0",4514:"f69b80d7",4582:"3f590dd0",4583:"adc663c1",4999:"45c088f4",5218:"e3f9e64f",5272:"9e674bb9",5742:"802c68cc",5811:"2a036363",5899:"2a4c4625",5921:"d022cac0",5936:"87f90188",6245:"87ce68d1",6537:"0c148f2c",6969:"6524f107",7039:"a5450704",7098:"2532e78b",7318:"5a5b0364",7850:"b4f2870e",7895:"675c7879",7921:"d73f15f6",8184:"e8230226",8319:"c729ffa3",8376:"79b1c37d",8401:"09c0854b",9048:"5e0fbc19",9054:"605772e3",9185:"54190603",9549:"adacdbfb",9647:"525442db",9883:"6b8e97b8"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},f="react-toastify-doc:",b.l=(e,a,c,r)=>{if(t[e])t[e].push(a);else{var d,o;if(void 0!==c)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(c))),a)return a(c)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/react-toastify/",b.gca=function(e){return e={17896441:"8401","66551e45":"502","137632cc":"517",ea9bff1f:"845","52a2c686":"922",c141421f:"957",a7456010:"1235",af215c62:"1385","662487cb":"1665",ed7d18a1:"1812","40bad94b":"1995",ea41c86b:"2097","1a4e3797":"2138","47daf468":"2141","5da316e4":"2582",bc12798f:"2789",fa4d91bf:"2802","4e6962c3":"3011","3bf1a7d4":"3143","311a8bd5":"3242",a555a233:"3296",c7d214b4:"3302","075e5e16":"3441",d6ebc36d:"3832","956f696f":"3890","0e9fc3fa":"3922","84ea4312":"4111","04e08b13":"4266","52a1d76b":"4395",c5ad6afb:"4495",b51bbbcb:"4514","1df93b7f":"4583","52683d51":"4999","37cd982c":"5218",dbe098d9:"5272",aba21aa0:"5742",a09c2993:"5899",c6ba2324:"5936",c44914c0:"6245","933da07e":"6537","14eb3368":"6969",cfaf49cb:"7039",a7bd4aaa:"7098",c4d948a6:"7850","075623d3":"7895","8933f726":"7921","1a5953a8":"8184",c865f2c7:"8319","82445e8c":"8376",a94703ab:"9048","5e929fd7":"9054",f48e05ce:"9185","25a3f8cb":"9549","5e95c892":"9647","52098b02":"9883"}[e]||e,b.p+b.u(e)},(()=>{var e={5354:0,1869:0};b.f.j=(a,c)=>{var t=b.o(e,a)?e[a]:void 0;if(0!==t)if(t)c.push(t[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((c,f)=>t=e[a]=[c,f]));c.push(t[2]=f);var r=b.p+b.u(a),d=new Error;b.l(r,(c=>{if(b.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var f=c&&("load"===c.type?"missing":c.type),r=c&&c.target&&c.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+r+")",d.name="ChunkLoadError",d.type=f,d.request=r,t[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,c)=>{var t,f,r=c[0],d=c[1],o=c[2],n=0;if(r.some((a=>0!==e[a]))){for(t in d)b.o(d,t)&&(b.m[t]=d[t]);if(o)var i=o(b)}for(a&&a(c);n Handling autoClose | React-Toastify - + diff --git a/category/addons/index.html b/category/addons/index.html index 22a2e7a0..1a5900db 100644 --- a/category/addons/index.html +++ b/category/addons/index.html @@ -4,7 +4,7 @@ Addons | React-Toastify - + diff --git a/category/api-reference/index.html b/category/api-reference/index.html index 94691427..0cc6ac44 100644 --- a/category/api-reference/index.html +++ b/category/api-reference/index.html @@ -4,7 +4,7 @@ API Reference | React-Toastify - + diff --git a/category/getting-started/index.html b/category/getting-started/index.html index c362cecc..800b6c76 100644 --- a/category/getting-started/index.html +++ b/category/getting-started/index.html @@ -4,7 +4,7 @@ Getting Started | React-Toastify - + diff --git a/category/guides/index.html b/category/guides/index.html index ac923034..10d85de5 100644 --- a/category/guides/index.html +++ b/category/guides/index.html @@ -4,7 +4,7 @@ Guides | React-Toastify - + diff --git a/custom-animation/index.html b/custom-animation/index.html index ce04d204..f1b1736d 100644 --- a/custom-animation/index.html +++ b/custom-animation/index.html @@ -4,7 +4,7 @@ Define a custom transition | React-Toastify - + diff --git a/define-callback/index.html b/define-callback/index.html index 1c8b479e..b2166b99 100644 --- a/define-callback/index.html +++ b/define-callback/index.html @@ -4,7 +4,7 @@ Callbacks and closure reason | React-Toastify - + diff --git a/delay-toast-appearance/index.html b/delay-toast-appearance/index.html index 419c90e8..c381ee68 100644 --- a/delay-toast-appearance/index.html +++ b/delay-toast-appearance/index.html @@ -4,7 +4,7 @@ Delay notification appearance | React-Toastify - + diff --git a/dispatch-toast-outside-of-react-component/index.html b/dispatch-toast-outside-of-react-component/index.html index 090d13de..0ceba314 100644 --- a/dispatch-toast-outside-of-react-component/index.html +++ b/dispatch-toast-outside-of-react-component/index.html @@ -4,7 +4,7 @@ Dispatch toast outside of react component | React-Toastify - + diff --git a/drag-to-remove/index.html b/drag-to-remove/index.html index 19086d9c..3b5b02e4 100644 --- a/drag-to-remove/index.html +++ b/drag-to-remove/index.html @@ -4,7 +4,7 @@ Drag to remove | React-Toastify - + diff --git a/enable-right-to-left-support/index.html b/enable-right-to-left-support/index.html index 44ed1180..f127a4de 100644 --- a/enable-right-to-left-support/index.html +++ b/enable-right-to-left-support/index.html @@ -4,7 +4,7 @@ Enable right to left support | React-Toastify - + diff --git a/how-to-style/index.html b/how-to-style/index.html index ed691300..bb9cd742 100644 --- a/how-to-style/index.html +++ b/how-to-style/index.html @@ -4,7 +4,7 @@ How to style | React-Toastify - + diff --git a/icons/index.html b/icons/index.html index 7f3a716d..caf54f22 100644 --- a/icons/index.html +++ b/icons/index.html @@ -4,7 +4,7 @@ Icons | React-Toastify - + diff --git a/index.html b/index.html index cb430da8..6fe67664 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ React-Toastify - + diff --git a/installation/index.html b/installation/index.html index bffc7722..78c84b72 100644 --- a/installation/index.html +++ b/installation/index.html @@ -4,7 +4,7 @@ Installation | React-Toastify - + diff --git a/introduction/index.html b/introduction/index.html index ef0f19f9..0185b7ec 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -4,7 +4,7 @@ React-toastify | React-Toastify - + diff --git a/limit-the-number-of-toast-displayed/index.html b/limit-the-number-of-toast-displayed/index.html index c2f1babc..593139b8 100644 --- a/limit-the-number-of-toast-displayed/index.html +++ b/limit-the-number-of-toast-displayed/index.html @@ -4,7 +4,7 @@ Limit the number of toast displayed | React-Toastify - + diff --git a/listen-for-changes/index.html b/listen-for-changes/index.html index ac863254..4ffb2452 100644 --- a/listen-for-changes/index.html +++ b/listen-for-changes/index.html @@ -4,7 +4,7 @@ Listen for changes | React-Toastify - + diff --git a/migration-v10/index.html b/migration-v10/index.html index 725ad679..e15a8d0b 100644 --- a/migration-v10/index.html +++ b/migration-v10/index.html @@ -4,7 +4,7 @@ Migrate to v10 | React-Toastify - + diff --git a/migration-v11/index.html b/migration-v11/index.html index 41030be7..5d0c2489 100644 --- a/migration-v11/index.html +++ b/migration-v11/index.html @@ -4,7 +4,7 @@ Migrate to v11 | React-Toastify - + diff --git a/migration-v8/index.html b/migration-v8/index.html index f6c8ab18..d3fa2b81 100644 --- a/migration-v8/index.html +++ b/migration-v8/index.html @@ -4,7 +4,7 @@ Migrate to v8 | React-Toastify - + diff --git a/migration-v9/index.html b/migration-v9/index.html index 22dbf500..6a564971 100644 --- a/migration-v9/index.html +++ b/migration-v9/index.html @@ -4,7 +4,7 @@ Migrate to v9 | React-Toastify - + diff --git a/multi-containers/index.html b/multi-containers/index.html index d1bca45a..5e0d411b 100644 --- a/multi-containers/index.html +++ b/multi-containers/index.html @@ -4,7 +4,7 @@ Multi containers | React-Toastify - + diff --git a/pause-on-focus-loss/index.html b/pause-on-focus-loss/index.html index 2fbf06b8..62854c26 100644 --- a/pause-on-focus-loss/index.html +++ b/pause-on-focus-loss/index.html @@ -4,7 +4,7 @@ Pause toast timer when the window loses focus | React-Toastify - + diff --git a/positioning-toast/index.html b/positioning-toast/index.html index 13e4bbed..7be670b3 100644 --- a/positioning-toast/index.html +++ b/positioning-toast/index.html @@ -4,7 +4,7 @@ Positioning toast | React-Toastify - + diff --git a/prevent-duplicate/index.html b/prevent-duplicate/index.html index b5b68276..31d2e36c 100644 --- a/prevent-duplicate/index.html +++ b/prevent-duplicate/index.html @@ -4,7 +4,7 @@ Prevent duplicate | React-Toastify - + diff --git a/promise/index.html b/promise/index.html index a2d080e6..1bfd5c11 100644 --- a/promise/index.html +++ b/promise/index.html @@ -4,7 +4,7 @@ Handling promises | React-Toastify - + diff --git a/release-notes/index.html b/release-notes/index.html index 32554907..87f08261 100644 --- a/release-notes/index.html +++ b/release-notes/index.html @@ -4,7 +4,7 @@ Release notes | React-Toastify - + diff --git a/remove-toast/index.html b/remove-toast/index.html index a9583b0d..d6de545f 100644 --- a/remove-toast/index.html +++ b/remove-toast/index.html @@ -4,7 +4,7 @@ Remove toast programmatically | React-Toastify - + diff --git a/replace-default-transition/index.html b/replace-default-transition/index.html index cc5d1774..b046d237 100644 --- a/replace-default-transition/index.html +++ b/replace-default-transition/index.html @@ -4,7 +4,7 @@ Replace the default transition | React-Toastify - + diff --git a/search/index.html b/search/index.html index 8af65e63..d4e3c5bf 100644 --- a/search/index.html +++ b/search/index.html @@ -4,7 +4,7 @@ Search the documentation | React-Toastify - + diff --git a/stacked/index.html b/stacked/index.html index a76bf714..93efb2bc 100644 --- a/stacked/index.html +++ b/stacked/index.html @@ -4,7 +4,7 @@ Stacked Notifications | React-Toastify - + diff --git a/timer/index.html b/timer/index.html index 8f614a6e..86d2147d 100644 --- a/timer/index.html +++ b/timer/index.html @@ -4,7 +4,7 @@ Play or pause the notification timer programmatically | React-Toastify - + diff --git a/update-toast/index.html b/update-toast/index.html index 64f58c69..b637e883 100644 --- a/update-toast/index.html +++ b/update-toast/index.html @@ -4,7 +4,7 @@ Update a toast | React-Toastify - + diff --git a/use-a-controlled-progress-bar/index.html b/use-a-controlled-progress-bar/index.html index 0b20a897..2f8b45c6 100644 --- a/use-a-controlled-progress-bar/index.html +++ b/use-a-controlled-progress-bar/index.html @@ -4,7 +4,7 @@ Use a controlled progress bar | React-Toastify - + diff --git a/use-a-custom-close-button-or-remove-it/index.html b/use-a-custom-close-button-or-remove-it/index.html index 59d8ac5e..1724b740 100644 --- a/use-a-custom-close-button-or-remove-it/index.html +++ b/use-a-custom-close-button-or-remove-it/index.html @@ -4,7 +4,7 @@ Use a custom close button or remove it | React-Toastify - + diff --git a/use-a-custom-id/index.html b/use-a-custom-id/index.html index 445ad1d2..fbd7cac0 100644 --- a/use-a-custom-id/index.html +++ b/use-a-custom-id/index.html @@ -4,7 +4,7 @@ Use a custom id | React-Toastify - + diff --git a/use-react-toastify-with-redux/index.html b/use-react-toastify-with-redux/index.html index 34579e8f..6d62b935 100644 --- a/use-react-toastify-with-redux/index.html +++ b/use-react-toastify-with-redux/index.html @@ -4,7 +4,7 @@ Usage with redux | React-Toastify - + diff --git a/use-your-own-component/index.html b/use-your-own-component/index.html index b9f9f94e..3f162368 100644 --- a/use-your-own-component/index.html +++ b/use-your-own-component/index.html @@ -4,7 +4,7 @@ Use your own component | React-Toastify - +