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>
  );
  })}