Close All button for react-toastify #221

README.md

@@ -109,6 +109,12 @@ You can find the release note for the latest release [here](https://github.com/f
 
 You can browse them all [here](https://github.com/fkhadra/react-toastify/releases)
 
+## Latest Code Changes
+Import toast file from Core
+Added button for Close all toastr as svg (X)
+ in ToastContainer.tsx file 
+Added closeAllprop variable for style property
+
 ## License
 
 Licensed under MIT

src/components/ToastContainer.tsx

@@ -2,19 +2,25 @@
 /* eslint react/prop-types: "off" */
 import React, { forwardRef, StyleHTMLAttributes, useEffect } from 'react';
 import cx from 'clsx';
-
+import { toast } from '../core';
 import { Toast } from './Toast';
 import { CloseButton } from './CloseButton';
 import { Bounce } from './Transitions';
 import { Direction, Default, parseClassName, isFn } from '../utils';
 import { useToastContainer } from '../hooks/useToastContainer';
 import { ToastContainerProps, ToastPosition } from '../types';
-
 export const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(
   (props, ref) => {
     const { getToastToRender, containerRef, isToastActive } =
       useToastContainer(props);
     const { className, style, rtl, containerId } = props;
+    const closeAllprop = {
+      backgroundColor: '#fff',
+      border: '2px solid white',
+      padding: '5px',
+      borderRadius: '50%',
+      color: '#000'
+    };
 
     function getClassName(position: ToastPosition) {
       const defaultClassName = cx(
@@ -73,6 +79,21 @@ export const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(
                   </Toast>
                 );
               })}
+              {toastList.length > 1 && (
+                <button
+                  className={`${Default.CSS_NAMESPACE}__close-button ${Default.CSS_NAMESPACE}__close-button`}
+                  style={closeAllprop}
+                  onClick={() => toast.dismiss()}
+                >
+                  {' '}
+                  <svg aria-hidden="true" viewBox="0 0 14 16">
+                    <path
+                      fillRule="evenodd"
+                      d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
+                    />
+                  </svg>
+                </button>
+              )}
             </div>
           );
         })}