custom cancel button call inside react-toastify

At development time code context/pattern is going to different for project to project… so bellow coding pattern is one of them…

Custom button component call inside “react-toastify”

import ApiCancelBtn from ‘../components/ApiCancelBtn’;
import {…


This content originally appeared on DEV Community and was authored by taiseen

At development time code context/pattern is going to different for project to project... so bellow coding pattern is one of them...

Custom button component call inside "react-toastify"

import ApiCancelBtn from '../components/ApiCancelBtn';
import { toast } from 'react-toastify';

export class Service {
    ...     
    async handleApiCall(callAI) {
        ...
        toast.info(`🙂 We are thinking...`, {
          icon: false,
          autoClose: 30000,
          pauseOnHover: false,
          // custom button component call...
          closeButton: <ApiCancelBtn jobId={'jobId'} />,
        });
        ...
    }
    ...
}
import api from '../api';

const ApiCancelBtn = ({ jobId }) => {

  const handleCancel = async (jobId) => {
    await api.cancelJob(jobId);
  };

  return (
    <button 
       className="toast-custom-cancel-button" 
       onClick={()=> handleCancel(jobId)}
    >
      Cancel API Call
    </button>
  );
};

export default ApiCancelBtn;


This content originally appeared on DEV Community and was authored by taiseen


Print Share Comment Cite Upload Translate Updates
APA

taiseen | Sciencx (2023-03-16T21:02:14+00:00) custom cancel button call inside react-toastify. Retrieved from https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/

MLA
" » custom cancel button call inside react-toastify." taiseen | Sciencx - Thursday March 16, 2023, https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/
HARVARD
taiseen | Sciencx Thursday March 16, 2023 » custom cancel button call inside react-toastify., viewed ,<https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/>
VANCOUVER
taiseen | Sciencx - » custom cancel button call inside react-toastify. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/
CHICAGO
" » custom cancel button call inside react-toastify." taiseen | Sciencx - Accessed . https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/
IEEE
" » custom cancel button call inside react-toastify." taiseen | Sciencx [Online]. Available: https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/. [Accessed: ]
rf:citation
» custom cancel button call inside react-toastify | taiseen | Sciencx | https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.