Refactor toast handling into reusable AppToastContainer component

src/components/App/App.jsx

@@ -7,7 +7,8 @@ import { Route, Switch, useHistory, withRouter } from "react-router-dom";
 import SharePage from "../SharePage/SharePage";
 import style from "./App.module.css";
 import ToggleDarkMode from "../ToggleDarkMode/ToggleDarkMode";
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
+import AppToastContainer from "../AppToastContainer/AppToastContainer";
 
 // Dark mode custom
 import useDarkMode from 'use-dark-mode';
@@ -57,21 +58,7 @@ const App = () => {
       <Switch>
         <Route exact path="/">
           <Typing handleInputChange={handleInputChange} onSubmit={onSubmit} />
-          <ToastContainer 
-          toastStyle={{
-
-            paddingLeft:'5rem'
-          }}
-          position="bottom-center"
-          autoClose={1000}
-          hideProgressBar={true}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          />
+          <AppToastContainer paddingLeft="5rem" />
         </Route>
         <Route exact path="/:id">
           <SharePage />

src/components/AppToastContainer/AppToastContainer.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const AppToastContainer = ({
+  color,
+  paddingLeft,
+  newestOnTop = false,
+  ...props
+}) => {
+  const toastStyle = {
+    ...(color ? { color } : {}),
+    ...(paddingLeft ? { paddingLeft } : {}),
+  };
+
+  return (
+    <ToastContainer
+      toastStyle={toastStyle}
+      position="bottom-center"
+      autoClose={1000}
+      hideProgressBar
+      newestOnTop={newestOnTop}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      {...props}
+    />
+  );
+};
+
+export default AppToastContainer;

src/components/Modal/Modal.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import "./Modal.css";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import { toast } from "react-toastify";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import Button from '../Button/Button';
+import AppToastContainer from "../AppToastContainer/AppToastContainer";
 const MODAL_STYLES = {
   position: "fixed",
   // display: 'flex',
@@ -40,20 +40,7 @@ export default function Modal({ id, open, children, onClose }) {
   const notify = () => toast("Link Copied📋");
   return (
     <>
-      <ToastContainer
-      toastStyle={{
-        color: 'black',
-        paddingLeft:'6rem'
-      }}
-        position="bottom-center"
-        autoClose={1000}
-        hideProgressBar={true}
-        newestOnTop={true}
-        closeOnClick
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-      />
+      <AppToastContainer color="black" paddingLeft="6rem" newestOnTop />
       <div style={OVERLAY_STYLES} />
       <div style={MODAL_STYLES}>
         <div className="modalTitle">

src/components/SharePage/SharePage.jsx

@@ -5,10 +5,10 @@ import Modal from '../Modal/Modal'
 import axios from "axios";
 import copy from "copy-to-clipboard";
 import style from "./SharePage.module.css";
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
 import xss from 'xss';
-import 'react-toastify/dist/ReactToastify.css';
 import 'highlight.js/styles/atom-one-light.css';
+import AppToastContainer from "../AppToastContainer/AppToastContainer";
 
 const SharePage = () => {
   const {id} = useParams();
@@ -63,21 +63,7 @@ const SharePage = () => {
     <Button name="Copy" onClick={notify} />
 
 
-<ToastContainer
-toastStyle={{
-  color: 'black',
-  paddingLeft:'3rem'
-}}
-position="bottom-center"
-autoClose={1000}
-hideProgressBar={true}
-newestOnTop={false}
-closeOnClick
-rtl={false}
-pauseOnFocusLoss
-draggable
-pauseOnHover
-/>
+<AppToastContainer color="black" paddingLeft="3rem" />
     </div>
     <Modal id={id} open={isOpen} onClose={() => setIsOpen(false)}/> 
     </div>